浮动元素的包含块为其最近的块级祖先元素。
定位：
根元素的包含块（也称为初始包含块）由用户代理建立，在HTML中，根元素就是html元素，不过有些浏览器会使用body作为根元素。在大多数浏览器中，初始包含块是一个视窗大小的矩形，不等于视窗。
对于一个非根元素，如果其position值是relative或static，包含块则由最近的块级框构成。
对于一个非根元素，如果其position值是absolute，包含块设置为最近的position值不是static的祖先元素（可以是任何类型）。这个过程如下：
如果这个祖先是块级元素，包含块则设置为该元素的内边距边界，也就是内容区域。
如果没有祖先，元素的包含块定义为初始包含块。
应用：
(1)使用绝对定位来模拟固定定位
ie6下，fixed失效
解决思路：
系统的滚动条是在文档上，而不是在html,body上。
body下的元素当position为absolute时，包含块为初始包含块，当拉动系统滚动条时，包含块随之移动。
把系统滚动条禁止掉，给body加上滚动条，body成为元素的初始包含块。拉动滚动条，达到fixed的效果。
效果图：
拖动滚动条，元素位置没变：
html代码：
<body>
<div id="test"></div>
<div style="height: 1000px;"></div>
</body>css代码：
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
#test{
position: absolute;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
background: pink;
}
340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
