定位-position属性

认识定位

原理：定位的元素超出文档流

        什么时候需要用到定位？

        在同一块文档流区域内，需要同时叠放多个标签

        定位的流程：

            1.通过 position 属性设置定位的参照物

            2.通过 方位属性，设置具体方位的定位数据，方位属性 top，

            left，right，bottom他是用来设置距离参照物有多远

            他们的优先级是   left > right

                            top > bottom

            position 属性的值：

                static  relative  absolute  fixed

            static：  静态定位，无参照物，不定位

            relative：相对定位，以元素本身没有移动之前的位置为参照物

            absolute：绝对定位,以 当前元素的 第一个具有定位属性的祖先级元素为参照物，作为参照物的祖先级元素，必须具有position: relative 或者 position: absolute 设置

            如果没有定位的祖先级属性，则参照物是 body

            fixed:    固定定位,相对于浏览器窗口定位

定位的特点

        

相对定位的特点：

            1.相对定位是基于元素原来的位置进行定位

            2.元素相对定位以后对元素本身没有任何影响

            3.元素设置了相对定位以后，虽然元素脱离了文档流，但是元素本身的位置依然占据文档流的空间

            4.相对定位的元素，天然的提升层级，比没有定位的元素层级高

            5.相对定位的元素，可以通过 left top bottom right 改变元素的位置

 绝对定位的特点：

            1.设置了决定对定位的元素会脱离文档流，不占据文档流空间，并且提升层级

            2.行元素设置了绝对定位以后，可以设置宽高，可以设置上下padding和margin，如果不设置宽高，宽高由内容撑开

            3.块元素设置了决定定位以后，自动的margin消失，如果不设置宽高，宽高内容撑开

            4.绝对定位是相对于他的第一个具有定位属性的祖先级元素进行定位，如果不存在这样的祖先级元素，则相对于document（文档）定位。具有定位属性的祖先级元素，一般需要有 relative和absolute其中的一个定位属性

            5.一般的如果设置了绝对定位，那么他的父元素有一个固定的高

固定定位的特点

            1.固定定位相对于浏览窗口定位

            2.固定定位脱离文档

定位的层级

不做特殊设置的时候，

        定位元素的层级 比非定位元素的层级高

        定位元素后来者居上

        使用 z-index 设置定位的层级，如果 不 设置该属性，则默认为0

        如果 z-index 的值相同，则还是后加载的元素高于先加载的

        如果值不同，值大的元素层级高