CSS学习笔记:三种定位机制之三绝对定位

CSS中规定的第三种定位机制:

绝对定位布局 

            通过设置position属性实现

            能够实现横线多列布局及较复杂的定位。如带有遮罩层效果的提示框、固定层效果、全屏广告等。

            position属性

            拥有3种定位形式: 1.静态定位  2.相对定位  3.绝对定位

            可设置4个属性值:

            static(静态定位)

            relative(相对定位)

            absolute(绝对定位)

            fixed(固定定位)

           absolute、fixed都属于绝对定位。

静态定位:元素没有设置position属性时就是静态定位，此时元素处于标准文档流中。

因此重点介绍相对定位与绝对定位

相对定位

当元素设置了相对定位后有如下特点:

     相对于自身原有位置进行偏移

     仍处于标准文档流中

     随即拥有偏移属性和z-index属性(因此当设置了相对定位后需设置偏移属性如top、left等)

绝对定位