I am attempting to place an image (after) behind a parent image. I've used boxes as example of what I am trying to achieve - the blue box is supposed to be behind the green box but no matter what z-index I use it doesn't seem to work.
.box-wrapper { position: absolute; overflow: hidden; height: 100%; width: 100%; top: 0; z-index: 1; } .box { background-color: green; position: relative; display: block; height: 52px; width: 72px; z-index: 53; top: 2%; z-index: 2; } .box:after { content: ''; //position: relative; background-color: blue; display: block; height: 50px; width: 70px; z-index: -3; }
<div class="box-wrapper"> <div class="box"></div> </div>
Remove the z-index of the box
and add position:absolute
for box:after
.box-wrapper {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
top: 0;
z-index: 1;
}
.box {
background-color: green;
position: relative;
display: block;
height: 52px;
width: 72px;
top: 2%;
}
.box:before {
content: '';
position: absolute;
background-color: blue;
height: 50px;
width: 70px;
z-index:-2;
}
The blue box is supposed to be behind the green box
Just remove all the irrelvant z-index
values, then it works perfectly.
.box-wrapper { position: absolute; overflow: hidden; height: 100%; width: 100%; top: 0; } .box { background-color: green; position: relative; display: block; height: 52px; width: 72px; top: 2%; color:white; } .box:after { content: ''; position: relative; background-color: blue; display: block; height: 50px; width: 70px; z-index: -1; }
<div class="box-wrapper"> <div class="box">I'm on top</div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.