2

please don't mark this question as duplicate because I don't think anyone asked this before. I know that position:absolute takes the element out of the flow, but that doesn't explain why its parent's height collapses to 0. If I have this markup:

<div class="container">
  <div class="inside">
    some content
  </div>
</div>

Then I add these styles:

.container {
background-color: red;
position: relative;
}

.inside {
background-color: green;
position: absolute;
}

Applying absolute positioning to the child will make the container's height collapse to 0. The only way to make it visible is to apply height, but not in percentages.

Does anyone know why this happens? And is there a way to make it not happen?

Thanks in advance

sir-haver
  • 3,096
  • 7
  • 41
  • 85
  • `position: absolute;` items are taken out of the flow. Their existence is all but unrecognized by the parent element. If you tell us what your'e trying to achieve, we can tell you how to fix it. Why do you want to use absolute positioning on the child element? – Tyler Roper Aug 16 '18 at 01:52
  • _The element is removed from the normal document flow, and no space is created for the element in the page layout._ https://developer.mozilla.org/en-US/docs/Web/CSS/position – ibex Aug 16 '18 at 01:55
  • Thanks guys, but I know the absolute positioning takes the item out of the flow, I'm just asking why it makes the parent's element height collapse to 0 – sir-haver Aug 16 '18 at 02:15
  • 4
    An item without a height declared will grow to fit its children. If it's children are all `position: absolute`, its children have no height, therefore the parent won't either. – Tyler Roper Aug 16 '18 at 03:16
  • Oh that makes sense thank you – sir-haver Aug 16 '18 at 18:22

0 Answers0