Remove
z-index:0;
from .absolute
.
题
I am trying to make the black div
(relative) above the second yellow one (absolute). The black div
's parent has a position absolute, too.
#relative {
position: relative;
width: 40px;
height: 100px;
background: #000;
z-index: 1;
margin-top: 30px;
}
.absolute {
position: absolute;
top: 0; left: 0;
width: 200px;
height: 50px;
background: yellow;
z-index: 0;
}
<div class="absolute">
<div id="relative"></div>
</div>
<div class="absolute" style="top: 54px"></div>
Expected Result:
解决方案
其他提示
This is because of the Stacking Context, setting a z-index will make it apply to all children as well.
You could make the two <div>
s siblings instead of descendants.
<div class="absolute"></div>
<div id="relative"></div>
I was struggling with this problem, and I learned (thanks to this post) that:
div:first-child {
opacity: .99;
}
.red, .green, .blue {
position: absolute;
width: 100px;
color: white;
line-height: 100px;
text-align: center;
}
.red {
z-index: 1;
top: 20px;
left: 20px;
background: red;
}
.green {
top: 60px;
left: 60px;
background: green;
}
.blue {
top: 100px;
left: 100px;
background: blue;
}
<div>
<span class="red">Red</span>
</div>
<div>
<span class="green">Green</span>
</div>
<div>
<span class="blue">Blue</span>
</div>
I was struggling to figure it out how to put a div over an image like this:
No matter how I configured z-index in both divs (the image wrapper) and the section I was getting this:
Turns out I hadn't set up the background of the section to be background: white;
so basically it's like this:
<div class="img-wrp">
<img src="myimage.svg"/>
</div>
<section>
<other content>
</section>
section{
position: relative;
background: white; /* THIS IS THE IMPORTANT PART NOT TO FORGET */
}
.img-wrp{
position: absolute;
z-index: -1; /* also worked with 0 but just to be sure */
}
Just add the second .absolute div before the other .second div:
<div class="absolute" style="top: 54px"></div>
<div class="absolute">
<div id="relative"></div>
</div>
Because the two elements have an index 0.
How about this?
<div class="relative">
<div class="yellow-div"></div>
<div class="yellow-div"></div>
<div class="absolute"></div>
</div>
.relative{
position:relative;
}
.absolute {
position:absolute;
width: 40px;
height: 100px;
background: #000;
z-index: 1;
top:30px;
left:0px;
}
.yellow-div {
position:relative;
width: 200px;
height: 50px;
background: yellow;
margin-bottom:4px;
z-index:0;
}
use the relative div as wrapper and let the yellow div's have normal positioning.
Only the black block need to have an absolute position then.
try this code:
.absolute {
position: absolute;
top: 0; left: 0;
width: 200px;
height: 50px;
background: yellow;
}
You have to put the second div on top of the first one because the both have an z-index of zero so that the order in the dom will decide which is on top. This also affects the relative positioned div because its z-index relates to elements inside the parent div.
<div class="absolute" style="top: 54px"></div>
<div class="absolute">
<div id="relative"></div>
</div>
Css stays the same.
I solved my z-index
problem by making the body wrapper z-index:-1
and the body z-index:-2
, and the other divs z-index:1
.
And then the later divs didn't work unless I had z-index
200+. Even though I had position:relative
on each element, with the body at default z-index
it wouldn't work.
Hope this helps somebody.