css定位-position

前言　　

　　定位的目的就是把元素摆放到指定的位置。

定位上下文：定位元素的大小，位置都是相对于定位上下文的。

position属性值有5个值

　　static：所有有元素定位默认的初始值都是static。就是不定位。

　　relative（相对定位）：相对自身之前的位置进行定位，之前占有的空间任然保留。

　　absolute（绝对定位）：在文档树中从下到上找最近的，position拥有static之外值的先祖元素作为定位上下文，其宽高百分比相对的都是定位上下文。一直找到根元素为止，都没有就把根元素作为上下文。

　　fixed（绝对定位）：相对于浏览器视窗定位。

　　注意：当元素的position拥有absolute和fixed就会生块级框,拥有设置宽高的的能力。无论它之前是什么类型的元素。

定位方向

　　position属性拥有static之外的值时，就叫做拥有定位。可以使用top/bottom/left/right四个值相对定位上下文指定位置。

　　小技巧：让定位元素在定位上下文中水平，垂直居中。

#hero{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;          
}

positions与流（z-index）

　　流：以页面正常流为0点的z轴，横截面看来就像一本书。背景z值是-1。

　　z-index：用来调整元素的层级，拥有absolute和fixed的元素才能够使用这个使用。

　　position的默认操作：absolute、fixed属性会把元素从正常流中脱离出来。位于正常流上方。把z值修改为1。

小结：

　　1，position属性有5个值：static/relative/absolute/fixed 。

　　2，拥有absolute或fixed的元素能够使用z-index调整层级。

　　3，让元素脱离文档正常流的定位属性会改变元素的显示，在元素周围生成块级框。