HTML 定位

定位

使用定位的场景：在文档流的同一个区域，叠放多个标签
定位的使用步骤
1.通过position设置定位参照物
2.通过 left top bottom right 属性设置当定位元素的位置，通过设置可以确定距离参照物的远近

            优先级：left>right
                    top>bottom

        定位元素脱离文档流
            position 的值：
                static 静态定位，无参照物，不定位
                relative 相对定位，以自身没有移动之前的位置为参照物
                absolute  绝对定位，以已经设置定位的父元素为参照物，
                并且父元素的position必须设置为absolute或者relative
                fixed  固定定位，以浏览器窗口为参照物

        相对定位：
        1.对一个元素设置相对定位以后，对该元素本身的特性没有影响
        2.元素相对定位以后，该元素原来所在的位置保留，但是元素是脱离文档流的
        3.元素相对定位以后，该元素的层级提升
        4.元素相对定位以后，可以设置left，top，bottom，right
        5.相对定位是基于元素原来的位置进行定位


        绝对定位：
        1.绝对定位的元素脱离文档流，并且提升层级
        2.行元素设置绝对定位以后，可以设置宽高，并且支持上下margin和上下padding
        3.块元素设置绝对定位以后，margin失效，不再占据父元素的空间，如果不设置宽高，则宽高由内容自动撑开
        4.绝对定位的元素，它是基于该元素第一个带有定位属性（relative和absolute其中一个）的祖先级元素作为参照物进行定位，
        如果他所有的祖先级都没有设置定位属性，则会相对于body定位
        5.由于绝对定位的元素脱离文档流，因此在使用绝对定位的时候，要确保他的父级具有一定的高度


        固定定位：相对于浏览器窗口进行定位
        1.脱离文档流
        2.提升元素的层级
        3.如果给父级添加了固定定位以后，子元素不用清浮动
        4.IE8及以下版本的浏览器不支持该属性