关于定位的知识点

在css中，定位布局共有四种方式：
（1）固定定位（fixed）
（2）相对定位（relative）
（3）绝对定位（absolute）
（4）静态定位（static）

 

1.固定定位

固定定位比较简单，固定定位是参照浏览器窗口的左上角进行偏移。
固定定位的特点就是：无论如何滑动页面，固定定位的元素位置都不会被改变，完全脱离文档流。
另外，如果设置了固定定位的元素也设置了width或height的百分比值，那么此百分比的值是参照窗口宽高来计算的。

2.相对定位

  相对定位不脱标,还占据原来的位置

  相对定位位移的时候参考自身的位置

3.绝对定位

 绝对定位的颜色脱标,不占据原来的位置

 绝对定位的元素,如果所有的父元素都没有定位,位移参考浏览器视口 

 绝对定位的元素,如果父元素有定位,位移参考离他最近的使用了定位(绝对,相对,固定)的父元素.

4.静态定位

静态定位 便签默认定位置,不脱标,不会动

静态定位是css中的默认定位方式，也就是没有定位。在此定位方式中设置：top，bottom，left，right，z-index 这些属性都是无效的。

z-index属性：
z-index属性是设置元素的层级，数值低的会被数值高的遮住。