here is my code:
< div>
< div class=“box box1”>
One
</ div>
< div class="box box2" >
Two
< /div>
< div class=“second-parent” >
</div >
Here is the CSS:
.box {
height: 200px;
width: 200px;
border: 2px solid black;
margin: 3px;
}
.parent-container {
border: 2px solid red;
background-color: beige;
margin-top: 40px;
}
.second-parent {
border: 4px solid black;
background-color: rgb(207, 229, 247);
height: 3400px;
margin-top: 220px;
}
.box1 {
background-color: aqua;
position: absolute;
bottom: 10px;
}
.box2 {
background-color: rgb(241, 221, 128);
position: relative;
bottom: 20px;
}
As you can see, box one is somewhere in the second container that is very large. Isn’t box1 supposed to be at the very bottom of the page and 10 pixels off the html element? So why is it hanging out in the second container when I give it absolute position?
I haven’t given the first parent container position: relative; but when I do, box1 still does this. Please explain why? thank you
(the second contianer that is making the blue box actually goes all the way down and its very big)
Hi, there!
While I was able to get your HTML and CSS working on my end, it will be easier for fellow Coder’s to provide assistance when code is formatted properly. This can be done be using preformatted text. Which is the </> button you should see above your text entry box. You can also use ctrl + e 
Moving to your question, it’s not that box1 is inside the second container, but on top of it. Absolute positioning removes an element from the flow of the document and positions the element within the viewport and not the document itself. This of course changes if the parent element is given relative positioning, then the element is positioned absolutely within the confines of its parent. So, if second-parent was positioned relatively and box1 were inside it, then it would be at the bottom of the document. (Only because it would be at the bottom of second-parent and not the viewport)
So, I am unsure what you mean by this. Because when applying relative to parent-container, box-1 is confined to that parent. Is this not what you see when you do so?
2 Likes
Hello! Thank you so much! I did not know how to share the code. Because when I did, it was not showing up, so I added extra spaces. Sorry about that!
You answered my question in great detail, I could not find answers via google.
I suppose I learned from your response that the box1 is supposed to stay in the viewport and where the page ends in the viewport, that becomes its bottom. (That’s what I observed while trying different pixels). I hope I got it right. Also, viewport is how much I see the page displayed on the screen?
About the second part, after I gave the first parent container position:relative; the box1 came inside the container and was shifted up 10px from bottom edge. So, it worked this time. I think I was making a mistake before.
Why is the parent container’s relative position affecting the box1?
Thank you, I will post my questions often now!
1 Like
The correct way to describe the positioning of an absolute element is that it will be positioned relative to its nearest positioned parent or ancestor. This means that in order for an absolute element to be positioned relatively to its container, the container needs to have a position value other than static which is the default value.
So, to answer your question, parent-container will affect box1 because parent-container’s position is something other than the default value of static.
2 Likes
