Max*_*dth 5 css position absolute
引用自msdn:
"对象相对于父元素的位置定位 - 如果其父元素未定位,则定位于主体对象 "
假设我设置了一个具有一定维度的div到底部0; 并离开:0; 它不会位于身体的底部,而是位于身体的左下方viewport.同时给身体一个边缘 - div仍然在左下角viewport.
我知道如何使用这些属性,但我正在寻找推理.当没有其他祖先定位时,它不是绝对元素所处的身体吗？谢谢!
这是小提琴: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);
}
绝对定位的元件相对于其包含块定位.
初始包含块
根元素所在的包含块是一个称为初始包含块的矩形.对于连续介质,它具有视口的尺寸并锚定在画布原点; 它是分页媒体的页面区域.
和absolute定位的元素对于被由最近的祖先与建立了包含块position的比其他任何东西static.即fixed,absolute或relative.
关键点是:
如果没有这样的祖先,则包含块是初始包含块.
因此,内部的绝对定位元素<body>不会相对于<body>自身放置,而是放置在初始包含块(即视口)中.
http://www.w3.org/TR/CSS2/visudet.html#containing-block-details
| 归档时间： |
|
| 查看次数： |
2963 次 |
| 最近记录： |