Search code examples
csselementz-indexparent

Why child element going behind container when using z-index -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;
}
Solution

  • You just need to add 

    z-index: 0;

    to parent element. It should solve your problem.