CODEWITHSUNDEEP
htmlcssz-index
john2smitian
john2smitian

Reputation: 21

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 container to top of the child with background-color: blue. I used a higher z-index for the container but it is still behind the child. 

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

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

.no3 {
  position: relative;
}

.no4 {
  position: relative;
}

.no5 {
  position: relative;
}
<div class="no1">
  <div>
    <div>
      <div class="no3">
        <div>
          <div class="no4">
            <div>
              <div>
                <div>
                  <div class="no5">
                    <div class="no2">


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

Here is the JSFiddle

Upvotes: 1

Views: 186

Answers (3)

Mahmoud Nabil
Mahmoud Nabil

Reputation: 21

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

Upvotes: 0

Harsh Patel
Harsh Patel

Reputation: 47

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;
  
}
<div class="no1">
Parent Div
<div>
<div>
<div class="no3">
<div>
<div class="no4">
<div>
<div>
<div>
<div class="no5">
<div class="no2">
Child Div

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

Upvotes: 0

VilleKoo
VilleKoo

Reputation: 2854

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;
  
}
<div class="no1">
  <div>
    <div>
      <div class="no3">
        <div>
          <div class="no4">
            <div>
              <div>
                <div>
                  <div class="no5">
                    <div class="no2">


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

Upvotes: 1

Related Questions