-1

I'm working inside container and I making 2 other elements parent and child. when I make child element absolute with z-index: -1 the child going behind container. What I want is make it behind the parent.

Js Fiddle Example

<div class="container">
  Container<br><br>
  <div class="paremt">
    Parent position relative
    <div class="child">
      Parent child
      Position Absolute index -1
    </div>
  </div>
</div>

* {
  color: #fff;
  font-size: 20px;
}
.container{
  background-color: pink;
  width: 100%;
  height: 150px;
}
.paremt{
  position: relative;
  background-color: red;
  height: 80px;
}
.child{
  position: absolute;
  top: 0;
  left: -20px;
  z-index: -1;
  background-color: blue;
  width: 400px;
  height: 200px;
  line-height: 250px;
}
duhok
  • 449
  • 2
  • 7
  • 16
  • 2
    I see it to be only behind the parent, not the container. – Pine Code Mar 25 '20 at 19:39
  • 1
    Default z-index value is auto, as you can see from inspect; auto sets the stack order equal to its parents. Then -1 is under every others one, so you can specify your needed z-index order for every div, to solve your problem – WoAiNii Mar 25 '20 at 19:42
  • `position:relative;z-index:0` to container – Temani Afif Mar 25 '20 at 19:50

2 Answers2

0

Add on your parent 

z-index: 1;
Tzimpo
  • 964
  • 1
  • 9
  • 24
0

You just need to add 

z-index: 0;

to parent element. It should solve your problem.

Reidenshi
  • 180
  • 8