How To Position A Parent Div On Top Of Its Child?

I have a container div and it has background-color: red;. There are about 12 children to this container, and the last child has background-color: blue;. I tried to move the contain

Solution 1:

You could remove the z-index from the parent and give the child a negative z-index

.no1 {
  width:800px;
  height:300px;
  background-color:red;
  position:relative;
}

.no2 {
  position:relative;
  width:500px;
  height:200px;
  background-color:blue;
  z-index: -1
}

.no3 {
  position:relative;
  
}

.no4 {
  position:relative;
  
}
.no5 {
  position:relative;
  
}

<divclass="no1"><div><div><divclass="no3"><div><divclass="no4"><div><div><div><divclass="no5"><divclass="no2"></div></div></div></div></div></div></div></div></div></div></div>

Solution 2:

To overlap child div with parent div, remove z-index given to container (parent div) and add negative z-index value to child div.

I have updated your fiddle here. Hope that resolves the issue.

.no1 {
  width:800px;
  height:300px;
  background-color:red;
  position:relative;
}

.no2 {
  position:relative;
  width:500px;
  height:200px;
    background-color:blue;
    z-index:-1;
}

.no3 {
  position:relative;
  
}

.no4 {
  position:relative;
  
}
.no5 {
  position:relative;
  
}

<divclass="no1">
Parent Div
<div><div><divclass="no3"><div><divclass="no4"><div><div><div><divclass="no5"><divclass="no2">
Child Div

</div></div></div></div></div></div></div></div></div></div></div>

Solution 3:

you can do this by adding z-index:-1 for child div's