我有两个嵌套的CSS元素。我需要让父元素位于子元素的顶部,也就是z轴上方。仅仅设置z-index是不够的。
我不能对子对象设置负的z索引,这会将它设置在实际页面上的页面容器之下。这是唯一的方法吗?
.parent {
position: relative;
width: 750px;
height: 7150px;
background: red;
border: solid 1px #000;
z-index: 1;
}
.child {
position: absolute;
background-color: blue;
z-index: 0;
color: white;
top: 0;
}
.wrapper
{
position: relative;
background: green;
z-index: 10;
}
<div class="wrapper">
<div class="parent">
parent parent
<div class="child">
child child child
</div>
</div>
</div>
发布于 2009-11-27 09:57:50
为子对象设置一个负z-index
,并移除父对象上设置的那个。
.parent {
position: relative;
width: 350px;
height: 150px;
background: red;
border: solid 1px #000;
}
.parent2 {
position: relative;
width: 350px;
height: 40px;
background: red;
border: solid 1px #000;
}
.child {
position: relative;
background-color: blue;
height: 200px;
}
.wrapper {
position: relative;
background: green;
height: 350px;
}
<div class="wrapper">
<div class="parent">parent 1 parent 1
<div class="child">child child child</div>
</div>
<div class="parent2">parent 2 parent 2
</div>
</div>
发布于 2012-04-15 02:39:47
幸运的是,解决方案是存在的。您必须为父包装器添加一个包装器,并更改此包装器的z-index,例如10,并将子包装器的z-index设置为-1:
.parent {
position: relative;
width: 750px;
height: 7150px;
background: red;
border: solid 1px #000;
z-index: initial;
}
.child {
position: relative;
background-color: blue;
z-index: -1;
color: white;
}
.wrapper {
position: relative;
background: green;
z-index: 10;
}
<div class="wrapper">
<div class="parent">parent parent
<div class="child">child child child</div>
</div>
</div>
发布于 2009-11-28 02:37:40
您需要在父进程和子进程上使用position:relative
或position:absolute
才能使用z-index
。
https://stackoverflow.com/questions/1806421
复制相似问题