css - 显示div在另一个之上 [英] css - display div above another one

问题描述

我目前正在一个解决方案，其中我必须显示一个错误消息（z-index）一个部分。

I'm currently working on a solution, where I have to display an error message above (z-index) a section.

该部分有它的css溢出属性设置为滚动或隐藏。这导致错误消息在左侧被截断。

The section has it css overflow attribute set to scroll or hidden. This is causing the error message to be truncate on the left side.

我想保持DOM的原样。是否有方法可以显示错误消息高于蓝色div的div。

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.

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

推荐答案

这个。在绝对定位的一个或（新）绝对定位的元素和变换中相对定位的（额外的）元素。

edit: 2 ways of achieving this. Relatively positioned (extra) element in an absolutely positioned one or (new) an absolutely positioned element and transform.

您可以通过在错误消息的容器上使用 position：absolute 来实现这一点，并在容器和消息之间使用一个额外的div。

DOM是

You can achieve this by using position: absolute on 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?

相关 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

修改： > transform：translate（X，Y） 与大量浏览器兼容（IE9 +根据 caniuse.com ）。
这是另一种实现所需OP的方法，不需要额外的元素：

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:

#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>

=http://codepen.io/PhilippeVay/pen/pNEKer =nofollow noreferrer> Codepen

Codepen

这篇关于css - 显示div在另一个之上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！