Question

我目前正在开发一个解决方案，我必须在上面显示一条错误消息（z-index）。

该部分将css溢出属性设置为scroll或hidden。这导致错误消息在左侧被截断。

我非常希望保持DOM不变。有没有办法显示错误消息的div＆＃34;上面＆＃34;蓝色的div。

HTML：

<div>
<div id="div1">
    div 1
</div>
<div id="div2">
    div 2
    <div id="msgErreur">
        Error
    </div>
</div>
</div>

** CSS：**

#div1 { 
width : 48%;
border: 1px solid red;
height: 150px;
float:left;
}

#div2 { 
width : 48%;
border: 1px solid blue;
height: 150px;
float:right;
overflow-y:scroll;
 }

#msgErreur {
background:#942911;
color:white;
top:30px;
left: -10px;
width : 150px;
height : 30px;
position:relative;
z-index:5;
}

Answer 1

编辑：实现此目的的两种方法。相对定位（额外）元素位于绝对定位的元素或（新）绝对定位的元素和transform。

您可以通过在错误消息的容器上使用position: absolute以及在容器和消息之间相对定位的额外div来实现此目的。
DOM略有修改，但没有移动整个代码块，也许你的要求没问题？

相关的 CSS ：

#msgErreur {
    position: absolute;
    z-index: 5;
    color: white;
}
#msgErreur > div {
    position: relative;
    top: 30px; left: -10px;
    width: 150px; height: 30px;
    background: #942911;
}

<强> Fiddle

编辑：2016年， transform: translate(X, Y) 与大量浏览器兼容（IE9 +根据caniuse.com）。这是实现OP所需的另一种方式，不需要额外的元素：

#div1 { 
    width : 48%;
    border: 1px solid red;
    height: 150px;
    float:left;
}
#div2 { 
    width : 48%;
    border: 1px solid blue;
    height: 150px;
    float:right;
    overflow-y:scroll;
}

#msgErreur {
    background:#942911;
    color:white;
    /* top:30px; */
    /* left: -10px; */
    width : 150px;
    height : 30px;
    position: absolute; /* not relative anymore */
    /* z-index:5; It's already stacked above if positioned. Needed if other positioned elements are there (a value of 1 would be enough) */
    transform: translate(-10px, 30px); /* replaces relative positioning (left and top => X and Y) */
}

<div>
    <div id="div1">
        div 1
    </div>
    <div id="div2">
        div 2
        <div id="msgErreur">
            Error
        </div>
    </div>
</div>

Codepen

css - 将div显示在另一个上方

1 个答案: