定位层,在一些情况下,元素随机摆放,在文档层和浮动层中布局已经远远无法满足需求,这时,我们将会使用定位属性。
在一般的页面中,常用到的定位有三种----相对定位、绝对定位、固定定位。接下来我们一一了解一下这三种定位。
相对定位(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用法雷同外,剩下的四个属性在定位时,依据也有所改变。
由于固定定位后,元素将一直 在页面我们可以看到的区域,即元素将随着滚动条的滚动而滚动,所以固定定位的四个定位属性在赋值后,依据的是浏览器的四条边进行定位。