CSS - 如何使用 z-index 放置 div？答案

【问题标题】：CSS - how to place div using z-index?CSS - 如何使用 z-index 放置 div？
【发布时间】：2026-01-05 05:15:01
【问题描述】：

我有一个关于如何放置 div 类的简短问题。

我有两个错误层，其中包含一些我想回显的错误消息。对于每个错误消息层，我都有一个 div 类：

.wrapper #header #navline form .errol {
    color: #F23;
    position: absolute;
    z-index: 2;
    height: 26px;
    padding:8px; 
    display: inline;
    white-space: nowrap; 
    line-height: 26px;
    right: 100%;
    top: 8%;
}
.wrapper #header #navline form .errol2 {
    color: #FFF;
    position: absolute;
    z-index: 2;
    height: 26px;
    padding:8px; 
    display: inline;
    white-space: nowrap; 
    line-height: 26px;
    right: 100%;
    top: 28%;
}

问题是当使用top和right时，位置是固定的。在另一个我用于相同任务的地方，而不是 top 和 right 我将使用 margin-left 和 margin-top，我没有以下问题：

php 以不同的字符串长度回显不同的错误消息。当使用 margin-left 和 margin-toponly margin-top 工作正常。 margin-left 将定位错误，因为 div 将扩展到两侧。所以我想知道是否有办法将右侧固定到固定位置，以便 div 仅在左侧扩展？

因此，如果有人能帮助我，我将不胜感激。

更新：

显示一些图像我的意思。

应该是这样的：

当字符串长度增加时会发生这种情况：

更新2：

给出一些 HTML 代码：

<div class="small">
    <?php if (empty($errors['xxx']) === false){?>
        <input class="log-err" type="text" id="xxx" placeholder="xxx" name="xxx" value="<?php echo isset($xxx) ? $xxx : '';?>" />
        <div class='error'>
            <?php echo $errors['xxx'][0];?>
        </div>
    <?php }else{?>
        <input type="text" id="xxx" name="xxx" placeholder="xxx" value="<?php echo isset($xxx) ? $xxx : '';?>" />
    <?php };?>
</div>

和 CSS：

/*Formatierung für Fehlermeldung Login/Email*/
.wrapper #header #navline form .error {
    color: #F23;
    position: relative;
    z-index: 2;
    height: 26px;
    padding:12px; 
    display: inline;
    white-space: nowrap; 
    line-height: 26px;
    right: 225px;  
    top: -4px;
}
.wrapper #header #navline form .error:before {
    content:"";
    position:absolute;
    z-index:2;
    left: 100%;
    width: 0px;
    top:-1px;
    height: 0px;
    border-top: 20px inset transparent;
    border-left: 20px dashed #f23;
    border-bottom: 20px inset transparent;
}

.wrapper #header #navline form .error:after {
    content:"";
    position:absolute;
    z-index:2;
    left: 100%;
    top:0px;
    width: 0px;
    height: 0px;
    border-top: 19px inset transparent;
    border-left: 18px dashed #fff;
    border-bottom: 19px inset transparent;
}

我现在遇到的问题是：

当回显另一个错误时：

【问题讨论】：

php 与此有什么关系？
您应该简单地回显单个 div 并定位它，然后将所有错误消息放入该单个 div。如果错误是绝对定位的，就不需要单独的 div 或类来处理错误，是吗？
输入框旁边会出现错误。一个包含所有错误消息的简单 div 不是一个选项。
嗨！ bonny，如果可能的话，您能否提供图片，以便我可以看到您想要完成的工作
你好，我更新了我的问题。

标签： css html stylesheet

【解决方案1】：

看看这个并在那里取三角形。它会解决你的问题。

http://css-tricks.com/examples/ShapesOfCSS/

【讨论】：

你好，谢谢。这只是将两个 div（一个用于错误消息，一个用于三角形）转换为一个。定位也不起作用。现在两者之间有一个空格加上位置不正确。谢谢。

【解决方案2】：

试试这个

.wrapper #header #navline form .errol {
color: #F23;
position: absolute;
z-index: 0;
height: 26px;
padding:8px; 
display: inline;
white-space: nowrap; 
line-height: 26px;
right: 100%;
top: 8%;

}

.wrapper #header #navline form .errol2 {
color: #FFF;
position: relative;
z-index: 1;
height: 26px;
padding:8px; 
display: inline;
white-space: nowrap; 
line-height: 26px;
right: 100%;
top: 8%;

}

【讨论】：