CSS 绝对位置 - 下一个定位元素是正文? [英] CSS position absolute - next positioned element is body?
问题描述
引用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 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 绝对位置 - 下一个定位元素是正文?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
