8、定位和BFC

2017-11-01  本文已影响6人  IUVO
定位:把一个元素按照一定的方式定到页面的某一个位置;
    position
        相对定位 relative
            针对自己本身的位置进行定位
            (Tips:以自己的位置的左上的点作为定位的原点)
        绝对定位 absolute
            针对有定位的父级的原点进行定位
            (Tips:如果父级没有定位,就会再逐层查找上一级父级,直到父级有定位为止;
                  绝对定位即使初始没有值,也一定要设置默认值:left: 0px;&top: 0px;主要是为了方便后期js的使用)。
        固定定位 fixed
            针对页面窗口进行定位,也是采用偏移量定位,定位参照物即为document
            (Tips:IE6不支持固定定位)

    偏移量
        left
        top
        right
        bottom

        优先级:
            left,top > right,bottom

    定位的特性
        相对定位 relative
            1.不影响元素本身的特性
            2.不使元素脱离文档流
            3.提升层级
            4.相对定位的子级有浮动的,不能触发BFC
            5.针对自己本身进行定位
        绝对定位 absolute
            1.使元素完全脱离文档流
            2.内容撑开宽高
            3.使元素支持所有的css样式
            4.提升层级
                z-index:数值 (定位层级设置,数值越大,层级越高)
            5.绝对定位一定要和相对定位使用
            6.如果有定位父级,针对定位父级发生偏移,没有定位父级,针对document进行偏移
            7.如果绝对定位的子级有浮动,可以省略清浮动的操作
        固定定位 fixed
            1.IE6不支持
            2.针对的是document窗口进行定位
            3.如果固定定位的子级有浮动,可以省略清浮动的操作
上一篇 下一篇

猜你喜欢

热点阅读