CSS的四大布局层级 和 HTML标签的‘生态系统’（四）------定位层

　　定位层，在一些情况下，元素随机摆放，在文档层和浮动层中布局已经远远无法满足需求，这时，我们将会使用定位属性。

　　在一般的页面中，常用到的定位有三种----相对定位、绝对定位、固定定位。接下来我们一一了解一下这三种定位。

　　相对定位（position:relative;），当一个元素具有相对定位时，该元素将可以设置以下五个属性，即top、left、right、bottom、z-index，四个方向属性设置后，可以改变元素的位置，分别是依据元素本身的四条边去定位，但是，元素在页面原先的地方还占据着位置（无论是文档层还是浮动层都可以占据位置），z-index是层级属性，设置后，会在z轴方向上做出层级的调整，当两个元素重叠时，层级高的会覆盖层级低的元素。PS：由于定位后在原先层次还占据位置，所以一般不会使用相对定位改变元素的位置，只会用来调层级或配合绝对定位时使用。

　　绝对定位（position:absolute;），和相对定位一样，该元素将可以设置以下五个属性，即top、left、right、bottom、z-index，但是，除了z-index用法雷同外，剩下的四个属性在定位时，依据有所改变。

　　我总结为以下三条：

　　第一、查看它的父元素是否有定位属性，若有，则依据它父元素的四条边进行定位，若没有，参见第二条。

　　第二、查看它的父元素的父元素是否有定位属性，若有，则依据它父元素的父元素的四条边进行定位，若没有，参见第三条。

　　第三、一级级向上查，若查到某父级元素有定位属性，则依据该父级元素的四条边进行定位，若没有，则依据第一屏的浏览器四条边进行定位。

　　PS：一般而言，需要移动位置时，都是使用绝对定位移动位置，但是往往需要父级元素添加定位属性配合使用，至于定位属性添加哪个值，依据页面情况而定。

　　固定定位（position:fixed;），和上两种相同，该元素将可以设置以下五个属性，即top、left、right、bottom、z-index，但是，除了z-index用法雷同外，剩下的四个属性在定位时，依据也有所改变。

　　由于固定定位后，元素将一直 在页面我们可以看到的区域，即元素将随着滚动条的滚动而滚动，所以固定定位的四个定位属性在赋值后，依据的是浏览器的四条边进行定位。

转载于:https://www.cnblogs.com/nation-blue/p/6682324.html