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

Question

我正在研究一个解决方案,我必须在上面显示一条错误消息(z-index).

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

我非常希望保持DOM不变.有没有办法显示蓝色div"上方"错误消息的div.

Js小提琴

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略有修改,但没有移动整个代码块,也许你的要求没问题？

相关HTML:

<div id="msgErreur">
    <div>Error</div>
</div>

相关CSS:

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

小提琴

编辑:它是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