儘管z-索引斷行？

你好，我有一個使用z-index的問題。我有一些輸入字段的表單。在他們旁邊，我有一些錯誤div用於回顯php錯誤消息。我遇到的問題是，錯誤div，只有當設置錯誤時纔會出現，導致輸入字段出現換行符。儘管z-索引斷行？

.wrapper #mainframe #left #frame form fieldset ul .fr { 
    width: 180px; 
    float: left; 
    margin-bottom: 18px; 
    margin-left: 25px; 
} 
.wrapper #mainframe #left #frame form fieldset ul input.err { 
    width: 180px; 
    height: 18px; 
    line-height: 18px; 
    padding-left: 5px; 
    margin-top: 3px; 
    outline:none; 
    background-image: url(../images/error.png); 
    background-repeat:no-repeat; 
    background-position: 172px 50%; 
} 
.wrapper #mainframe #left #frame form fieldset ul .erl { 
    color: #FFF; 
    position: relative; 
    z-index: 1; 
    background-color: #f23; 
    width: 200px; 
    height: 30px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 10px; 
    font-weight: bold; 
    line-height: 30px; 
    text-align: center; 
    left: +217px; 
    top: 25px; 
}

這裏是html代碼：

<li class="fr"> 
<label for="a">a</label> 
<?php if (isset($errors['a'])):?> 
<input class="err" type="text" id="a" name="a" value="<?php echo isset ($_POST['a'])? $_POST['a'] : ''; ?>" tabindex="20" autocomplete="off"/> 
<?php if (isset($errors['a']) 
&& empty($errors['a'][0]) == true):?> 

<?php echo "<div class='erl'>"; 
echo $errors['a'][0]; 
echo "</div>"; 
endif;?> 

<?php endif;?>

，所以我不明白爲什麼會這樣。我認爲使用z-index應該像是導致兩層（z-index：0和z-index：1），這樣在第二層z-index應該有足夠的左側和右側：1。如果有人能告訴我如何解決這個問題，我真的很感激。非常感謝。

來源

2012-07-23 bonny

您需要顯示HTML輸出。 – 2012-07-23 18:57:23

我添加了html到我的問題。 – bonny 2012-07-23 19:06:18

其他的CSS類如「fr」和「err」在哪裏？ – 2012-07-23 19:17:37

我會找東西像padding和margin（http://css-tricks.com/the -css-box-model /），可能會增加無意間距和總寬度。

此外，請檢查以確保您應用z-index的任何元素都明確聲明瞭它們的位置......還要定位父元素（http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack。 ASP）。

最後，我會看看hasLayout屬性（http://www.satzansatz.de/cssd/onhavinglayout.html）的問題。這可能是文尼所談論的，因爲Z-index並沒有改變文檔流式傳輸的順序。嘗試在您的錯誤消息中使用position：absolute將其從整個文檔流中移除。

來源

2012-07-23 20:18:00 ph33nyx

你好，好的改變立場絕對要小心線斷。但現在我有問題，每個錯誤div放置在相同的位置。所以我將不得不爲每個輸入字段聲明單獨的類並使用自己的定位。 – bonny 2012-07-23 20:38:07

爲避免斷行，您需要從文檔流中刪除錯誤元素。 z-index屬性與該屬性完全無關;它隻影響元素的堆棧順序，否則它是位置不可知的。

這就是爲什麼我向你推薦這個jsfiddle;幫助解決您的困境的替代方案。

來源

2012-07-23 19:17:55

這與問題有什麼關係？我不希望那個錯誤div集成到該字段集... – bonny 2012-07-23 19:20:01

@bonny我誤解了這個問題;當我開始寫我的答案時，情況有點不同。無論如何，更新了我的答案。保重！ – 2012-07-23 19:30:46

-1

試試這個：

HTML：

<li class="fr"> 
    <label for="a">a</label> 
    <input class="err" type="text" id="a" name="a" value="" tabindex="20" autocomplete="off"/> 
    <div class='erl'> Error text</div> 
    <div class="sp"></div> 
</li>

CSS：

//for label 
.fr label, .fr .err, .fr .erl { 
    float:left; 
} 
.fr .sp { 
    clear:both; 
}

來源

2012-07-23 19:29:39 RAMe0

儘管z-索引斷行？

回答

相關問題