Html css - 在另一个上方显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24539017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css - display div above another one
提问by David Laberge
I'm currently working on a solution, where I have to display an error message above (z-index) a section.
我目前正在研究一个解决方案，我必须在 (z-index) 部分上方显示一条错误消息。
The section has it css overflow attribute set to scrollor hidden. This is causing the error message to be truncate on the left side.
该部分将它的 css 溢出属性设置为scrollor hidden。这导致错误消息在左侧被截断。
I would very like to keep the DOM as it is. Is there a way to display the div for the error message "above" the blue div.
我很想保持 DOM 原样。有没有办法在蓝色 div 的“上方”显示错误消息的 div。
HTML :
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;
}
回答by FelipeAls
edit: 2 ways of achieving this. Relatively positioned (extra) element in an absolutely positioned one or (new) an absolutely positioned element and transform.
编辑：实现这一目标的 2 种方法。绝对定位元素中的相对定位（额外）元素或（新）绝对定位元素和transform。
You can achieve this by using position: absoluteon the container of the error message and an extra div relatively positioned between container and message.
The DOM is slightly modified but without moving whole blocks of code, maybe it's OK with your requirements?
您可以通过position: absolute在错误消息的容器上使用并在容器和消息之间相对定位的额外 div来实现这一点。
DOM 略有修改，但没有移动整个代码块，也许可以满足您的要求？
Relevant HTML:
相关HTML：
<div id="msgErreur">
<div>Error</div>
</div>
Relevant CSS:
相关CSS：
#msgErreur {
position: absolute;
z-index: 5;
color: white;
}
#msgErreur > div {
position: relative;
top: 30px; left: -10px;
width: 150px; height: 30px;
background: #942911;
}
EDIT:it's 2016 and transform: translate(X, Y)is compatible with a large set of browsers (IE9+ according to caniuse.com).
Here's another way of achieving what OP needed, with no extra element needed:
编辑：它是 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>