神秘的包含块

       包含块对于position这个属性的影响很大，所以仔细研究了一下包含块的定义。

       包含块实际上就是定位的参考框，元素一旦被定义了定位显示都具有包含块性质，定位元素都将以包含块为参考进行位置的调整。

       一个元素的包含块按以下的方式来定义：

•  根元素的包含块由用户代理建立（如浏览器），在HTML中，根元素就是html元素，浏览器选择html元素作为自己的包含块，即整个HTML页面（初始包含块）。
• 当position是fixed时，包含块有视距窗口建立。
• 当position是relative或static时，包含块由最近的块级框祖先、表单元格祖先或行内块祖先的内容边界构成。
• 当position是absolute时，包含块由离它最近的且position值不是static的祖先元素决定：
  • 如果其祖先是块级元素，包含块由祖先的内边距边界形成；
  • 如果祖先是行内元素，包含块取决于祖先的direction属性：
    • 如果direction是ltr，其祖先包含的第一个框的上、左内容边界就是包含块的上、左边界，其祖先包含的最后一个框的下、右内容边界就是包含块的下、右边界。
    • 如果direction是rtl，其祖先包含的第一个框的上、右内容边界就是包含块的上、右边界，其祖先包含的最后一个框的下、左内容边界就是包含块的下、左边界。
  • 如果没有祖先，包含块被定义为初始包含块。

以上就是本人对包含块的理解，欢迎大神批评指正！