Overlay div on top of parent with same size

Question

I need to overlay a child div to cover it's parent div when my drag and drop event starts, but I can't get the child div to be on top of the parent using z-index.

Here is my HTML:

<div class="some-element">
  <div class="parent-div">
    <div class="child-div">
      <p>This should be over the parent</p>
    </div>
    <h1>Some text lorem ipsum</h1>
  </div>

  <div class="another-div">
    <p>lorem ipsum</p>
  </div>
</div>

And here is my CSS

html, body {
  height: 100%;
  width: 100%;
}

.some-element {
  background-color: blue;
  width: 100%;
}

.parent-div {
  background-color: red;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}

.child-div {
  background-color: green;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 999;
}

Here is a CodePen demonstrating my issue: https://codepen.io/leofontes/pen/LkgJpo

I thought by using z-index and position relative I would be able to achieve what I wanted, but it doesn't seem to stack on top of the parent. Any idea on what is going on?

Solution

For .child-div change the positioning to absolute.

.child-div {
  background-color: green;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 999;
}

html,
body {
  height: 100%;
  width: 100%;
}
.some-element {
  background-color: blue;
  width: 100%;
}
.parent-div {
  background-color: red;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}
.child-div {
  background-color: green;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 999;
}

<div class="some-element">
  <div class="parent-div">
    <div class="child-div">
      <p>This should be over the parent</p>
    </div>
    <h1>Some text lorem ipsum</h1>
  </div>

  <div class="another-div">
    <p>lorem ipsum</p>
  </div>
</div>

Relative positioning will move something relative from it's current location but continue to take up space in it's original location. Take a look at the example below. When I use relative positioning to move the "text" segment, notice the line of text doesn't collapse down to a single space between "Some" and "here."

span {
  position: relative;
  top: 20px;
  left: 20px;
  background-color: yellow;
}

<p>
  Some <span>text</span> here.
</p>

When you set an element to absolute positioning you take it out of the normal document flow. Meaning they don't take up space as far as other non absolute positioned elements are concerned. This is why you need to use height: 100%; and width: 100%; to make sure the child element matches the dimensions of the parent when using absolute positioning.

By default padding will add to the 100% dimensions. To prevent this use box-sizing: border-box;.

An alternative to height: 100%; and width: 100%; is to use top: 0; right: 0; bottom: 0; left: 0;. That will stretch the child element to the edges of the parent element.

Comments

[leofontes]

Awesome! Thank you so much, will accept your answer in 8 minutes when Im allowed :D

[EricL]

Note that if your child element has padding the width/height of 100% will not work properly unless you also give it the border-box box-sizing ("box-sizing: border-box;"). Instead of using height/width of 100% you can also use "top:0; bottom:0; left:0; right:0;"

[hungerstar]

@EricL, that is correct. Thanks for reminding me. I will add to my answer.