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

Question

我正在开发一个解决方案，需要在一个区域的上方（z-index）显示一个错误消息。

该区域的CSS overflow属性设置为scroll或hidden。这导致错误消息在左侧被截断。

我非常希望保持DOM不变。有没有一种方法可以将错误消息的

“置于”蓝色

的上方显示？

Js fiddle

HTML:

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

**CSS : **

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

- David Laberge

---

请在问题中发布代码。 - Popnoodles

z-index: 5px 应该改为 z-index: 5，但这并不能解决问题。 - Alp

@Alp 谢谢，现在已经修复了... - David Laberge

如果您不介意从最左边开始计算像素，可以使用 position: absolute 或 position: fixed。但我猜这不是一个选项。 - Alp

@alp 那个测试用例是使用 AngularJS 模板表示更复杂应用程序的一部分。它只是为了看看我是否遗漏了什么。 - David Laberge

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

Fiddle

编辑：现在是2016年，transform: translate(X, Y)已经兼容了许多浏览器（根据caniuse.com，包括IE9+）。 以下是另一种实现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

- FelipeAls