php - 尽管 z-index 换行？

Question

你好，我在使用 z-index 时遇到问题。我有一个带有一些输入字段的表单。在它们旁边我有一些错误 div 用于回显 php 错误消息。我遇到的问题是，只有在设置错误时才会出现的错误 div 会导致输入字段换行。

.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 的左右手侧应该有足够的位置。如果有人可以告诉我如何解决这个问题，我将不胜感激。非常感谢。

Answer 1

我会寻找填充和边距 (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) 的问题。这可能就是 Vinny 所说的，因为 Z-index 不会像堆栈顺序那样改变文档的流动方式。尝试在您的错误消息中使用 position:absolute 以将它们从文档的整体流程中删除。