CSS位置绝对值-下一个定位元素是body吗? [英] CSS position absolute - next positioned element is body?
问题描述
从msdn报价:
对象相对于父元素的位置(或相对于 正文对象(如果其父元素未定位)"
"Object is positioned relative to parent element's position—or to the body object if its parent element is not positioned"
假设我将某个维度的div设置为底部0；左:0；它不会位于主体底部，而是位于viewport的左下方.同样，在给主体留出边距时-div仍将位于viewport的左下角.
Lets say I set a div with certain dimension to bottom 0; and left: 0; it will not be positioned at the bottom of body but at bottom left of viewport. Also when giving body a margin - the div will still be at bottom left of viewport.
我知道如何使用这些属性，但我正在寻找推理方法.当没有其他祖先放置时，难道不是绝对元素所在的身体吗?谢谢！
I know how to work with these properties but I am looking for reasoning. Is it not the body to which the absolute elem is positioned to when no other ancestor is positioned? Thanks!
这是小提琴: 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);
}
推荐答案
绝对定位的元素相对于其包含的块定位.
Absolutely positioned elements are positioned relative to their containing block.
初始包含块
根元素所在的包含块是一个矩形 称为初始包含块.对于连续媒体，它具有 视口的尺寸，并锚定在画布原点；它是 分页媒体的页面区域.
The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media.
和absolute相对于其包含块定位元素，该包含块由最近的祖先用position而非static的其他东西建立.即fixed，absolute或relative.
And absolute positioned elements respect to their containing block which is established by the nearest ancestor with a position of anything other than static. i.e. fixed, absolute or relative.
关键点是:
如果没有这样的祖先，则包含块为初始 包含块.
If there is no such ancestor, the containing block is the initial containing block.
因此，不会将<body>内部的绝对定位元素放置在相对于<body>本身的位置上，而是放置在最初的包含块(即视口)上.
Therefore that absolute positioned element inside <body> won't be placed with the respect to the <body> itself, but to the initial containing block, i.e. the viewport.
http://www.w3.org/TR/CSS2/visudet.html#contains-block-details
这篇关于CSS位置绝对值-下一个定位元素是body吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
