如何让父元素出现在子元素之上
如何让父元素出现在子元素之上
提问于 2009-11-27 09:38:19
我有两个嵌套的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>
回答 6
Stack Overflow用户
发布于 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>
Stack Overflow用户
发布于 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>
Stack Overflow用户
发布于 2009-11-28 02:37:40
您需要在父进程和子进程上使用position:relative或position:absolute才能使用z-index。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1806421
复制相关文章
相似问题
腾讯云开发者
