z-index: position child below container

Question

z-index: -1 for the :before is not working when specifying z-index:2 for the box.

How to move the :before below the box keeping the z-index:2 for the box.

.box{
  background: lavender;
  height: 200px;
  width: 200px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.box:before{
  content: '';
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  position: absolute;
  right: -20px;
  bottom: -20px;
  z-index: -1;
}

<div class="box">
</div>

Fiddle - https://jsfiddle.net/gLnfde49/

first duplicate to explain the issue, second one to give an alternative solution — Temani Afif, Dec 03 '19 at 08:35

Haerriz · Answer 1 · 2019-12-03T07:41:06.837

.box {
  background: lavender;
  height: 200px;
  width: 200px;
  position: relative;
}
.box::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  border: 1px solid #000;
  position: absolute;
  z-index: -1;
  right: -20px;
  bottom: -20px;
}
.main
{
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  right: 50;
  transform : translate(50%,50%);
}

<div class="main">
  <div class="box">
</div>
</div>

I have achieved this using the ::before element and used the main element as position:relative;. To make the div of class .box to be in middle of the page add a div above (.main) if needed.

score -1 · Answer 2 · answered Dec 03 '19 at 07:47

Issue is with transform property and you need to relative parent for absolute child

.box {
    background: lavender;
    height: 200px;
    width: 200px;
    position: relative;
    /* left: 50%; */
    /* transform: translateX(-50%); */
    /* z-index: 2; */
    margin: 0 auto;
}

z-index: position child below container

2 Answers2