Day09

01、认识定位

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

        什么时候需要定位？

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

        定位的流程：

        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:固定定位,相对于浏览器窗口定位

02、定位的特点

相对定位的特点:

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

        2.元素设置了相对定位之后,对元素本身没有任何影响

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

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

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

        绝对定位的特点:

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

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

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

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

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

        固定定位的特点:

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

        2.固定定位脱出文档流