CSS位置绝对值-下一个定位元素是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.

fixed相对于初始包含块表示视口的尺寸.

初始包含块

根元素所在的包含块是一个矩形称为初始包含块.对于连续媒体，它具有视口的尺寸，并锚定在画布原点；它是分页媒体的页面区域.

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吗?

相关推荐