1

I have read so many question related to what I am asking but none of them answered/explained the question in my question's context. So what is happening is I have two divs a parent(.outer) and a child(.inner) div, and I am applying position: relative to parent and position: absolute to child, also I am adding a height of 1200px to child div, but the parent div is not taking up the full height as that of child div, I know a lot of question like has been answered on SO, but I want some explanation about why position: absolute on child element is causing or stopping the parent to take up the height to contain its child. Removing position absolute do let parent div to take the whole height to contain it's child div but I don't need tricks, but the explanation to why is position: absolute is causing the problem, What exactly position absolute is doing in this context, Here's my code snippet for the same,

.outer{
            width: 100%;
            min-height: 400px;
            background-color: hotpink;
            position: relative;
        }
        .inner{
            position: absolute;
            background-color: palegreen;
            width: 30%;
            height: 1200px;
            top:    20%;
            left: 20%;
        }
<div class="outer">
    <div class="inner">
        
    </div>
</div>
Uchiha Itachi
  • 119
  • 9
  • 2
    That's what position absolute does. It removes the element from the document flow while still positioning it in relation to the parent element. – Paulie_D Jul 07 '21 at 10:10
  • please explain "removing element from the document flow" thing, what does this imply in the context? or any resource where I could get to know about this thing – Uchiha Itachi Jul 07 '21 at 10:16
  • Mozilla Developer network is the best source. – Paulie_D Jul 07 '21 at 10:18
  • I went throught MDN doc, But I still am not very sure about "removing from document flow" thing. What all things could happen if an element is removed from the document flow? – Uchiha Itachi Jul 07 '21 at 10:26
  • 1
    Heavily related but not quite a duplicate: https://stackoverflow.com/a/33132765/2756409 should answer your question. Your question "what all could happen if an element is removed from the document flow" is too broad for Stack Overflow. The question asked above in the post is also probably too broad, but holding off on voting one way or the other for now. – TylerH Jul 07 '21 at 21:16
  • 1
    woah, that answer of yours really cleared ton of doubts of mine. Thanks @TylerH – Uchiha Itachi Jul 09 '21 at 02:09

0 Answers0