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

Question

我目前正在研究一个解决方案，我必须在 (z-index) 部分上方显示一条错误消息。

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

我非常希望保持 DOM 的原样。有没有办法在蓝色 div“上方”显示错误消息的 div。

Js fiddle

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

编辑:实现此目的的 2 种方法。绝对定位元素中的相对定位(额外)元素或(新)绝对定位元素和 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;
}

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