概念:
元素的尺寸和位置的计算往往是由该元素所在的包含块决定的,包含块就是为它里面包含的元素定位提供一个初始位置,它是一片长方形的区域。一般元素用到position定位时,因需要确定定位的初始位置,就需要清楚什么是包含块。(为便与理解,个人做了简单的描述,不一定是标准解释)。
包含块:
1、在HTML中,html元素就是一个包含块(即初始包含块)。
2、如果元素的定位(position)为:relative或static(默认静态定位)。
它的包含块就是由它最近的块级(或含块属性)祖先元素创建。
3、如果元素的定位(position)为:fixed,它的包含块由窗口创建,
定位起始位置为窗口左上角
4、如果元素的定位(position)为:absolute,它的包含块由最近的position为:
relative、absolute、fixed的祖先元素创建。
其中的祖先元素尽量是块级元素,行内元素会产生一些兼容问题。
更具体可参考包含块文档:点击打开链接