定位样式

定位样式详解

使用方法：
使用position属性去设置定位

1. 参照物 用来确立物体位置的基点

2. 根据这个参照物进行位置偏移
   可选值

   static静态定位  默认值  元素是静止的没有开启定位    
   relative 开启元素相对定位
   absoluted 开启元素的绝对定位
   fixed 开启元素的固定定位
   

相对定位的特点

1. 元素开启相对定位，不设置偏移量元素不会有任何变化
2. 相对定位不会脱离文档流，参照元素自身去行色移动
3. 不会改变元素的性质（块还是块，行内还是行内）
4. 提升层级 比浮动和文本都要高
5. 多个偏移量以左上为尊

绝对定位的特点

绝对位置去安放元素，找到参照物位置，从这个位置出发.

绝对定位参照物特点

1. 有定位属性（除了static定位属性）的最近的祖先元素
2. 如果所有父级都没有定位属性就按
   body==>html==>视口
3. 父相子绝，逐层往上找参照物
   父亲相对定位,不影响页面布局,不设置偏移元素动都不动,子元素参照父元素去绝对定位的位置移动
4. 绝对定位完全脱离文档流

子元素偏移量的计算不包含border但是包含padding

偏移量可以单位：px，%。核算值包含padding

浮动半脱离文档流

1. 块级元素感受不到浮动元素 文字还是感受得到
2. 同级绝对定位盒子叠加,后写的在最上面,不保留位置
3. 绝对定位将元素强制块状化,不具有父元素100%的性质,而是由里面的元素撑开

绝对定位会让浮动失效