定位的简单介绍


定位(position):分为相对定位(relative)、绝对定位(absolute)、固定定位(fixed)。
偏移量:偏移的方向的具体值,方向分为top、right、bottom、left

relative:相对定位(相对于自身位置出发)。
    特点:
        1、不影响元素本身的特性。
        2、只设置了相对定位,没有设置偏移量的情况下,对元素本身没有任何影响。
        3、元素没有脱离文档流。
        4、提升层级为整层。
        5、有了定位,才会有偏移量;在没有定位的情况下写偏移量是没有作用的。
        6、相对定位一般配合绝对定位使用。
       
absolute:绝对定位。
    特点:
        1、使元素脱离文档流。
        2、提升层级为整层。
        3、使内联元素具有宽高样式。
        4、使块元素在没有定义宽度的情况下由内容撑开宽度。
        5、如果最近的父级有定位,则会相对于父级进行定位和便宜;
             如果父级无定位,则偏移量是相对文档(document)发生偏移的。
        6、如果子元素为绝对定位,那么父元素一般为相对定位。

fixed:固定定位。
    特点:
        1、相对于可视区进行偏移的。
        2、不理会父级是否有定位,永远只相对于可视区。
        3、脱离文档流。
        4、提升层级为整层。
       
说明:在同级的定位元素之间,默认情况下后面的元素层级比前面的元素层级高。

层级:z-index。只有定位元素才有z-index
同级元素之间的z-index才会进行层级的高低比较。
定位元素的默认层级均为0,如果想提升元素层级,直接设置z-index的值即可。
z-index的数值越大,元素层级越高。如:z-index:2

猜你喜欢

转载自java1010.iteye.com/blog/2411076