Menu
Community /Pin to ProfileBookmark
@daveyerwinJul 20.2021 — #you don't have a parent div in your code
your css works as expected
the red square is positioned at 0,0
the blue square is also position at 0,0
because absolute positioned elements are not in the flow
transform: translate(0px, 100vh);
the translate directive causes the blue square
position to be moved along a vector
0px to the right and 100vh down
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate()
so it is positioned at the view height
just out of sight
https://www.kirupa.com/html5/make_body_take_up_full_browser_height.htm#:~:text=By%20default%2C%20both%20the%20html%20element%20and%20body,height%20of%20the%20content%20that%20is%20inside%20them .
By default, both the html element and body element have their height CSS property set to auto . This means they don’t have an explicit height out of the box. They’ll either take up whatever height they are told to be, or they will take up whatever height of the content that is inside them.
.absolute-container {
position: absolute;
width: 100px;
height: 100px;
background-color: #111BBB;
left: -100px
}
you won't the blue square with the above css
Element with position absolute stretches the parent div, why?
Hello! I have a problem with position absolute.
Here is a link for a quick demo of the problem.
The square that’s positioned with absolute positioning stretches the body of the page. But from what I know – it shouldn’t.
What am I doing wrong?
I want the element with position absolute to be outside of the page. Like somewhere where I can never see it!
Thank you!
Sign in
to post a comment6 Comments(s) ↴
0
@daveyerwinJul 20.2021 — #you don't have a parent div in your codeyour css works as expected
the red square is positioned at 0,0
the blue square is also position at 0,0
because absolute positioned elements are not in the flow
transform: translate(0px, 100vh);
the translate directive causes the blue square
position to be moved along a vector
0px to the right and 100vh down
so it is positioned at the view height
just out of sight
By default, both the html element and body element have their height CSS property set to auto . This means they don’t have an explicit height out of the box. They’ll either take up whatever height they are told to be, or they will take up whatever height of the content that is inside them.
.absolute-container {
position: absolute;
width: 100px;
height: 100px;
background-color: #111BBB;
left: -100px
}
you won't the blue square with the above css