position&containing block_html/css_WEB-ITnose

一、包含块(Containing Block)

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

1、包含块介绍

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

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

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

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

如果祖先元素是块级元素，则包含块是祖先元素的padding框。

如果祖先元素是内联元素，包含块取决于祖先元素的direction属性

dirrection:ltr,祖先元素的第一个盒子的上、左padding框边界是包含块的上和左，祖先元素最后一个盒子的下、右padding边界是包含块的下和右。

direction:rtl，祖先元素第一个盒子的上、右padding框边界是包含块的上右，祖先元素最后一个元素的下、左padding框边界是包含块的下、左。

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

2、static和包含块

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

        
第一段内容
        
            这些文字是            第 二段             内容        
    

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

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

div1??》body

p1??》div1

p2??》div1

em1??》p2

strong1??》p2

3、absolute和包含块

举例：direction:ltr，保护块的顶，左是祖先元素生成的第一个框的padding 框，右下同理。

    TTT            这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。 XX XX        XX    

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

举例：direction:rtl，保护块的顶，右是祖先元素第一个框的顶，右padding框，下左同理。

    T            这段文字从右向左排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。可以通过它们绝对定位的位置来判断它们 XX XX        XX    

其他情况相对简单，不做介绍。接下来是position各取值细节。

二、position:static

static是默认值，表示元素没有别"positioned"，position其它值表示元素被"positioned"。所以"已定位元素"表示的就是设置position属性为除static之外的值的元素。position:static元素的布局就是按照盒子模型在正常流中来布局。

使用：

一般不用显示指定，除非想要覆盖之前设置的定位，让元素回归到正常流。

三、position:relative

relative表现和static一样，除非添加了top|right|bottom|left属性。//lxy可以理解为relative是从static到absolute的一个过渡属性状态。就像在inline和block中间过渡有一个inline-block。

相对定位元素属性设置top|right|bottom|left偏离正常位置后，其他元素不会调整位置来弥补偏离后剩下的空间。也可以理解为仍然占据原来空间，所以不影响其他元素布局，可能会覆盖别的元素。

总结：relative元素仍然处于正常流，且不改变display属性，可能会覆盖页面其他元素。

举例：

第一个元素
    
第二个元素
    
第三个元素

取消注释查看设置偏移后的对比效果：

四、position:absolute

position:absolute相对于最近的"positioned" 祖先元素定位。如果没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。

绝对定位元素的定位值发生冲突时的解决方法:

如果同时指定 top 和 bottom（非 auto），优先采用 top。

如果同时指定 left 和 right，若 direction 为 ltr（英语、汉语等），则优先采用 left；若 direction 为 rtl（阿拉伯语、希伯来语等），则优先采用right。

总结几点：

position:absolute和margin，padding都不冲突，可同时生效。

position:absolute会改变display值，所以会产生包裹性。

position:absolute的元素脱离正常流。所以会产生破坏性。

position:absolute存在时【不加top,right,bottom,left】，float不起作用，所以可以用来去浮动。

1、包裹性

设置了position:absolute的元素，其尺寸会收缩正好容纳内容。

因为position:absolute会改变元素的display属性【类似浮动】，inline变成block，比如下面例子。

内容

块状元素设置position:absolute后，chrome下top,right,bottom,left变为auto，而ff下直接是计算出的宽度。

2、破坏性

举例：子元素absolute，父元素高度塌陷。

        
元素内容
    

原理：和float一样，position:absolute让元素脱离正常流，而父元素还在正常流中，它们已经是两个世界的东东了，自然撑不起父元素高度。

Note:设置position:absolute后再设置float:left不生效，且最终计算的float值还是none而不是设置的值。

3、不受relative控制的position:absolute举例

不使用top，right,bottom,left中任何一个属性或者使用auto作为值。

一般都是用absolute加margin调整位置。

举例：hot图片始终在求课文字右上角。

          新项目       
  新项目

分析：因为position:absolute让标签的display值从inline变成block，所以可以设置宽高。通过margin调整位置。

类似例子：

    
        
                            
                    推荐                    vip                
                
分享：CSS深入理解之float浮动
                
                    已完结                    3514人学习                
                    
    

4、无固定宽高容器内绝对定位元素拉伸

举例：实现遮罩效果

同样的原理实现：全屏自适应遮罩层效果，切加上margin:auto可实现水平且直居中。

        
            弹出层内容            关闭        
    
    打开

五、position:fixed

fixed是absolute的特例，相对于视窗来定位，所以页面滚动它还是停靠在相对位置。

所以fixed也会改变元素的display属性，会让元素脱离正常流。

六、position和float的关系

1、position:static;position:relative和float属性可共存。

3、同时设置position:absolute和float，float无效。

4、设置position:absolute的元素可能会覆盖float元素。

举例：

我是float：left的DIV
    
我是一个应用了position：absolute的DIV。

为什么绝对定位元素可能会覆盖浮动元素，因为浏览器渲染的时候相同堆叠上下文中，先渲染非定位元素，再渲染浮动元素，最后渲染已定位元素。

关键问题是，此时设置float元素的z-index来覆盖absolute无效。因为z-index值只适用于已经定位的元素（即position:relative/absolute/fixed），对浮动元素不起作用的。

可将float元素的position属性值设置为relative，然后设置z-index。因为已定位元素并且z-index不是默认的auto的话会生成一个新的堆叠上下文。

如果上面说的还不是很懂，或者想更深入了解z-index原理，可参考：z-index堆叠规则

七、资源链接

8 Box model

9 Visual formatting model

中文版CSS2/visuren

中文版CSS2/visudet/zh-hans

KB012: 绝对定位( Absolute positioning )

http://w3help.org/zh-cn/causes/RM1020

http://w3help.org/zh-cn/kb/008/

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。