如何让父元素出现在子元素的上方

我有两个嵌套的 CSS 元素。我需要让父元素位于子元素的 z 轴上方。仅仅设置 z-index 是不够的。

我不能在子页面上设置一个负的 z 索引，这样会将它设置到实际页面上页面容器的下面。这是唯一的办法吗？

Http://jsbin.com/ovafo/edit

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

123510 次浏览
小开

Set a negative z-index for the child, and remove the one set on the parent.

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

https://jsfiddle.net/uov5h84f/

小开

You would need to use position:relative or position:absolute on both the parent and child to use z-index.

小开

Since your divs are position:absolute, they're not really nested as far as position is concerned. On your jsbin page I switched the order of the divs in the HTML to:

<div class="child"><div class="parent"></div></div>

and the red box covered the blue box, which I think is what you're looking for.

小开

style:

.parent{
overflow:hidden;
width:100px;
}


.child{
width:200px;
}

body:

<div class="parent">
<div class="child"></div>
</div>
小开

Fortunately a solution exists. You must add a wrapper for the parent and change z-index of this wrapper, for example 10, and set z-index for the child to -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>

小开

Cracked it. Basically, what's happening is that when you set the z-index to the negative, it actually ignores the parent element, whether it is positioned or not, and sits behind the next positioned element, which in your case was your main container. Therefore, you have to put your parent element in another, positioned div, and your child div will sit behind that.

Working that out was a life saver for me, as my parent element specifically couldn't be positioned, in order for my code to work.

I found all this incredibly useful to achieve the effect that's instructed on here: Using only CSS, show div on hover over <a>

小开

Some of these answers do work, but setting position: absolute; and z-index: 10; seemed pretty strong just to achieve the required effect. I found the following was all that was required, though unfortunately, I've not been able to reduce it any further.

HTML:

<div class="wrapper">
<div class="parent">
<div class="child">
...
</div>
</div>
</div>

CSS:

.wrapper {
position: relative;
z-index: 0;
}


.child {
position: relative;
z-index: -1;
}

I used this technique to achieve a bordered hover effect for image links. There's a bit more code here but it uses the concept above to show the border over the top of the image.

http://jsfiddle.net/g7nP5/


提交答案