Absolute position makes parent div missing

Question

I'm trying to study and understand the positions absolute and relative.

Scenario 1 (relative):

* {
  padding: 0;
  margin: 0;
 }
 
 #container {
  width: 100%;
  background-color: black;
 }

 #box1 {
  width: 50%;
  position: relative;
  left: 20px;
  color: white;
  background-color: blue;
 }

<div id="container">
  
  <div id="box1">
   
   <h1>This is box 1</h1>

  </div>

 </div>

I can completely understand the above. When given a relative positioning, its moving 20px from the left of its normal position. So what I studied in theory did make sense and this is clear.

Now, when I tried this - Scenario 2 (absolute):

* {
  padding: 0;
  margin: 0;
 }
 
 #container {
  width: 100%;
  background-color: black;
 }

 #box1 {
  width: 50%;
  position: absolute;
  left: 20px;
  color: white;
  background-color: blue;
 }

<div id="container">
  
  <div id="box1">
   
   <h1>This is box 1</h1>

  </div>

 </div>

Question: Why is that the black background is gone? From what I understood, box1 should move 20px to its left from its parent (which is currently the browser as I've used absolute for its position).

So it does move, but why is the black background (which was set in its parent) missing? Issn't Box1 nested into it? Why does it go missing?

I've tried googling but I'm unable to understand this logic and would love if someone could point me in the right direction.

Make absolute positioned div expand parent div height

I tried to look at this, however, once again I'm not understanding the correct answer.

When you set position: absolute; you take that element out of the document flow, so for the parent it looks like there's nothing inside it, so it collapses to 0 height, here's a good read about positioning: https://css-tricks.com/almanac/properties/p/position/ — Jonas Grumann, Jun 05 '19 at 10:02
Ah, I see. So I have to manually set a height for the parent div to match the child div with the absolute position? Is that how its done? — Gosi, Jun 05 '19 at 10:04
Correct. This is why position: absolute; is used for very specific cases, otherwise it breaks the layout most of the time — Jonas Grumann, Jun 05 '19 at 10:05
That is awesome, thank you. Yes I tried to manually set a height and it works. And yes I agree, I shall not be using this unless really needed. It does indeed breaks the layout of the website. If you could post this as an answer, I'll mark it as the answer! Thanks buddy. — Gosi, Jun 05 '19 at 10:08
I was out for lunch but no worries for the answer, I'm just glad I helped — Jonas Grumann, Jun 05 '19 at 11:37

score 3 · Answer 1 · edited Jun 05 '19 at 11:23

3

As absolute positioned element doesn't take its space and sets around the relative element.
So in your structure, you need to give height or some padding to "#container".

#container {
    width: 100%;
    background-color: black;
    height: 200px;
}

edited Jun 05 '19 at 11:23

Webdeveloper_Jelle

2,868
4
29
55

answered Jun 05 '19 at 11:19

Tanu

61
2

StepUp · Answer 2 · 2019-06-10T11:48:06.323

Try to set height of #container, because position: absolute take your <div id="box1"> out from the <div id="container"> cause position is static of #container by default. For the DOM it looks like <div id="container"> has nothing and there is nothing rendered:

#container {
    width: 100%;
    background-color: black;
    height: 100px;
}

Please, see difference between position:static:

.parent {
    border: 2px solid #0074d9;
    background-color: lightgreen;
    color: #0074d9;
    padding: 5px;
    position: static;
    height: 100px;

  }

  .element {
    border: 1px dotted #000;
    background-color: lightgray;
    color: red;
    position: absolute;
    left: 0;
    bottom: 25px;
  }

and position: relative;:

.parent {
    border: 2px solid #0074d9;
    background-color: lightgreen;
    color: #0074d9;
    padding: 5px;
    position: relative;
    height: 100px;

  }

  .element {
    border: 1px dotted #000;
    background-color: lightgray;
    color: red;
    position: absolute;
    left: 0;
    bottom: 25px;
  }

In position:relative our child container will be placed inside parent element. Please, read this great article about position:absolute.

Ito Pizarro · Accepted Answer · 2019-06-05T13:03:30.607

Your .container element is not being “held open” by its absolutely positioned child, so it is collapsing (to 0 height). You can test this by shimming the parent open by defining a height in the corresponding CSS.

#container {
    width: 100%;
    background-color: black;
    height: 100px; /* for example */
}

* {
  padding: 0;
  margin: 0;
}

#container {
  width: 100%;
  background-color: black;
  height: 100px; /* for example */
}

#box1 {
  width: 50%;
  position: absolute;
  left: 20px;
  color: white;
  background-color: blue;
}

<div id="container">

  <div id="box1">

    <h1>This is box 1</h1>

  </div>

</div>

Unsolicited Advice: When I am trying to pin down a puzzling effect of a CSS rule, it is helpful to assign the element in question a border value. I find this helps reveal the underlying structural effects of my style rules. For example, a border on .container reveals that it is still there; if impossibly short.

#container {
  border: 2px solid lime; /* it helps if it doesn't blend in with your existing page palette, too */
  width: 100%;
  background-color: black;
}

* {
  padding: 0;
  margin: 0;
}

#container {
  border: 2px solid lime; /* for example */
  width: 100%;
  background-color: black;
}

#box1 {
  width: 50%;
  position: absolute;
  left: 20px;
  color: white;
  background-color: blue;
}

<div id="container">

  <div id="box1">

    <h1>This is box 1</h1>

  </div>

</div>

Absolute position makes parent div missing

3 Answers3