position containing block原点

如果元素有属性 'position:absolute',containing block 由最近的 position 不是 static 的祖先建立,按下面的步骤:
        1、如果祖先是块级元素,containing block 由祖先的 padding edge(除 margin, border 外的区域 的最小矩形) 形成。
        2、否则(不是inline),containing block 取决于祖先的 direction 属性。
            如果 direction 是 ltr(左到右),祖先产生的第一个盒子的上、左内容边界是 containing block 的上方和左方,祖先的最后一个盒子的下、右内容边界是 containing block 的下方和右方。
            如果 direction 是 rtl(右到左),祖先产生的第一个盒子的上、右内容边界是 containing block 的上方和右方,祖先的最后一个盒子的下、左内容边界是 containing block 的下方和左方。


        如果都找不到,则为 initial containing block。

        补充:
        1. static(默认的)/relative:简单说就是它的父元素的内容框(即去掉padding的部分)
        2. absolute: 向上找最近的定位为absolute/relative的元素
        3. fixed: 它的containing block一律为根元素(html/body),根元素也是initial containing block

posted @ 2016-07-27 23:22  kan_kan  阅读(183)  评论(0编辑  收藏  举报