定位position介绍

定位 (position): 是一种更加高级的布局手段

　　　　　　　-通过定位可以将元素摆放到页面的任意位置。

　　　　　　　使用position属性来设置定位

　　　　　　　　可选值： static 默认值元素是静止的，没有开启定位

　　　　　　　　　　　　 relative 开启元素的相对定位

　　　　　　　　　　　　 absolute 开启元素的绝对定位

　　　　　　　　　　　　 fixed 开启元素的固定定位

　　　　　　　　　　　　 sticky 开启元素的粘滞定位

例子：开启相对定位

　　　　position:relative;

　　　　top:100px; // 向上偏移100像素

　　　　bottom:10px;

　　　　left:10px;

　　　　right:10px;

　　相对定位的特点:

　　　　　　　　　　1.如果不设置偏移量，元素不会发生任何变化。

　　　　　　　　　　2.相对定位参照元素在文档中的位置进行定位。

　　　　　　　　　　3.相对定位会提升元素的层级。

　　　　　　　　　　4.相对定位不会使元素脱离文档流。

　　　　　　　　　　5.相对定位不会改变元素性质。

　　　绝对定位的特点:

　　　　　　　　　　1.如果不设置偏移量，元素的位置不会发生变化。

　　　　　　　　　　2.元素会从文档流中脱离。

　　　　　　　　　　3.绝对定位会改变元素的性质，行内元素变成块元素，块的宽度被内容撑开。

　　　　　　　　　　4.绝对定位会使元素提升一个层级。

　　　　　　　　　　5.绝对定位元素是相对于包含块进行定位的。

　　　　　　　　　　　　包含块（containing Block）

　　　　　　　　　　　　　　正常情况下：

　　　　　　　　　　　　　　　　　　　　包含块就是离当前元素最近的祖先块元素。

　　　　　　　　　　　　　　　　　　　　例如：<div class="box1"> 2222<div class="box2">1111</div></div>

　　　　　　　　　　　　　　　　　　　　　　　　　　　div.box2的包含块就是div.box1

　　　　　　　　　　　　　　　　　　　　　　　　span元素的包含块是div.box ;

　　　　　　　　　　　　　　　　　　　　　　　　em元素的包含块是div.box;

　　　　　　　　　　　　　　绝对定位的包含块：

　　　　　　　　　　　　　　　　　　　　　　离它最近的开启了定位的祖先元素。

　　　　　　　　　　　　　　　　　　　　　　如果所有的祖先元素都没有开启定位，则相对于根元素(<html>)定位。

　　　　固定定位（fixed）：绝大部分跟相对定位相同。

　　　　　　　　　　　　唯一不同的是参照浏览器视口，不会随滚动条滚动改变。

　　　　粘滞定位（sticky）: 兼容性不好

　　　　　　　　　　　　当元素位置到达某个位置后，不再滚动。