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?

Answer 1

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.