Question

你好我使用z-index有问题。我有一个带有一些输入字段的表单。在他们旁边我有一些错误divs来回显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

为避免换行，您需要从文档流中删除error元素。 z-index属性与此完全无关;它只影响元素的堆栈顺序，否则它与位置无关。

这就是我推荐你jsfiddle的原因;另一种帮助解决你的困境的方法。

Answer 2

我会寻找填充和边距（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将其从文档的整个流程中删除。

Answer 3

试试这个：

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;
}

尽管z-index断线？

3 个答案: