深入理解position属性&containing block

要讲position,首先就涉及到一个概念：包含块。

1、包含块介绍

包含块简单理解就是一个定位参考块，就是"大盒子里套小盒子"中那个大盒子。元素有positon属性就必然涉及到包含块。先简单总结一下。

1、初始包含块（Initial containing block），即根元素的包含框。在浏览器中是原点与 canvas 原点重合、大小与 viewport 相同的矩形。

2、position:static|relative 元素包含块为最近的块级【block|list-item|table】父元素的内容框content-box

3、positon:absolute 先找absolute最近已定位祖先元素【没有的话包含块就是初始包含块】

如果祖先元素是块级元素，则包含块是祖先元素的padding框。
如果祖先元素是内联元素，包含块取决于祖先元素的direction属性
- dirrection:ltr,祖先元素的第一个盒子的上、左padding框边界是包含块的上和左，祖先元素最后一个盒子的下、右padding边界是包含块的下和右。
- direction:rtl，祖先元素第一个盒子的上、右padding框边界是包含块的上右，祖先元素最后一个元素的下、左padding框边界是包含块的下、左。

4、positon:fixed 元素的包含块是由viewport决定的，和根元素无关。

2、static和包含块

举例：没有设置postion，所以标签position都是默认的static。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>包含块 by starof</title>
</head>
<body>
    <div id="div1">
        <p id="p1">第一段内容</p>
        <p id="p2">
            这些文字是
            <em id="em1">第 <strong id="strong1">二</strong>段</em> 
            内容
        </p>
    </div>
</body>
</html>

产生盒子的元素——》包含块

body——》initial C.B.(UA-dependent)

div1——》body

p1——》div1

p2——》div1

em1——》p2

strong1——》p2

3、absolute和包含块

主要介绍一下祖先元素是内联元素的情况。

举例：direction:ltr

包含块的上，左是祖先元素span生成的第一个框的上，左padding 框，包含块下右是祖先元素span的最后一个line box的下右padding框。

<p style="border:1px solid red; width:200px; padding:20px;">
    TTT
    <span style="background-color:#C0C0C0; position:relative;padding:10px;">
        这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。
 可以通过它们绝对定位的位置来判断它们包含块的边缘。 <em style="position:absolute; color:red; top:0; left:0;">XX</em> <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>
        <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>
    </span>
</p>

深入理解position属性&containing block

包含块的宽度可以为负，行内元素的第一个框的起始位置位于最后一个框结束位置的右侧，这时包含块为负值。

我增删几个字符来看看效果如下

<p style="border:1px solid red; width:200px; padding:20px;">
    TTTTT
    <span style="background-color:#C0C0C0;position:relative;padding:10px;">
        这段文字从左向右排列，红XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。
 可以通过它们绝对定位的位置来判断它们包含块 <em style="position:absolute; color:red; top:0; left:0;">XX</em> <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>
        <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>
    </span>
</p>

View Code