Question

如果前者是后者的孩子，是否可以将绝对定位的#element置于相对定位的#container ID后面？

换句话说，如何让红色元素位于之间蓝色元素和黄色元素？

z-index似乎不起作用。

HTML ：

<div id="big_container">
    <div id="container">
        <div id="element"></div>
    </div>
</div>

CSS ：

#big_container {
    width:100%;
    height:100%;
    background:yellow;
}
#container, #element {
    height:50px;
    width:50px;
}

#container {
    position:relative;
    z-index:5;
    background:blue;
}

#element {
    position:absolute;
    z-index:10;
    background:red;
    top:5px;
    left:5px;
}

更新

Answer 1

从父级中删除z-index并将孩子设置为-1

＆＃13;

#container, #element {
    height:50px;
    width:50px;
}
#container {
    position:relative;
    background:blue;
}
#element {
    position:absolute;
    z-index:-1;
    background:red;
    top:5px;
    left:5px;
}

＆＃13;

<div id="container">
    <div id="element"></div>
</div>

＆＃13;

Answer 2

只需将 z-index：-1 应用于红色块并移除蓝色块的位置属性即可使用

#container, #element ,#element1 ,#element2 {
    height:50px;
    width:50px;
}
#container {
      z-index: 5;
    background: #00F;
}
#element {
       position: absolute;
    z-index: -8;
    background: #F00;
    top: 21px;
    left: 5px;
}
#element1 {
    position: absolute;
    z-index: -9;
    background: #008000;
    top: 10px;
    left: 25px;
}
#element2 {
     position: absolute;
    z-index: -10;
    background: #FF0;
    top: 27px;
    left: 33px;
}

<div id="container">
    <div id="element"></div>
     <div id="element1"></div>
     <div id="element2"></div>
</div>

在这里你可以看看你可以用负z分度管理那些div 这是演示示例

DEMO

Answer 3

你可以在css中使用pseudo element，如果只是绘图 ...：

小提琴：http://jsfiddle.net/4oyau3wy/1/

<强>的CSS ：

#container, #element {
    height:50px;
    width:50px;
}
#container:before {
    content:"";
    width: 50px;
    height:50px;
    top:0;
    left:0;
    z-index:5;
    background:blue;
    position:absolute;
}
#element:before {
    content:"";
    width: 50px;
        height:50px;
    position:absolute;
    z-index:4;
    background:red;
    top:5px;
    left:5px;
}

将绝对定位元素放在相对定位元素后面

3 个答案: