Quoting from msdn:
"The object is placed relative to the position of its parent element—or to the body element if the parent element is not positioned"
Let's consider a scenario where I set a div with specific dimensions to have a bottom value of 0 and left value of 0. In this case, it won't be positioned at the bottom of the body element but rather at the bottom left corner of the viewport. Even when applying a margin to the body element, the div will still remain at the bottom left of the viewport.
I understand how these properties function in CSS, but I am seeking clarification on the underlying rationale behind them. Shouldn't the absolute element be positioned relative to the body when no other ancestor elements are designated as positioned? Thank you for your insights!
For reference, here is the fiddle link: http://jsfiddle.net/picbig/0p6rgv8f/
HTML:
<div id="large_box_greater_than_viewport"></div>
<div id="absolute_cnt"></div>
CSS:
body{
margin-left: 200px;
}
#large_box_greater_than_viewport{
width: 900px;
height: 10000px;
background: red;
}
#absolute_cnt{
position: absolute;
width: 65%;
bottom: 0;
left: 0;
height: 80px;
background: rgba(0,0,0,.7);
}