CSS 绝对位置 - 下一个定位元素是正文?

问题描述：

引用msdn:

"对象相对于父元素的位置定位——或如果其父元素未定位，则为 body 对象"

"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 的左下角.同样，当给 body 一个边距时 - 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 定位元素相对于初始包含块，它采用视口的尺寸.

fixed positioned elements respect to the initial containing block which takes the dimensions of the viewport.

初始包含块

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

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.

因此，内的绝对定位元素不会相对于本身放置，而是相对于初始包含块，即视口.

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#working-block-details

CSS 绝对位置 - 下一个定位元素是正文?

相关推荐