定位/子绝父相

脱离文档流之后，就会是块元素

    粘性定位：半脱离文档流，碰到域值之前，不脱离文档流，碰到域值之后，脱离文档流

                     相对离自己最近且有滚动条的父级做偏移

    给绝对定位之后，是悬在页面之上的，就不再占据浏览器的位置了，悬空不占位的现象，叫做脱离文档流

默认的时候，多个盒子同时给了绝对定位之后，结构在后的盒子定位之后层在最上

/* z-index: 1; 定位之后才可以使用 */

            /* 没有设置z-index时，结构在后的盒子定位之后层在最上 */

            /* 设置z-index后，数值越大，层越靠上，不带单位，可正可负 */

绝对定位：

/* 给了绝对定位之后，是悬在页面之上的，不再占据浏览器位置 */

/* 悬空不占位的现象，叫脱离文档流 */

    /* 利用top/bottom/left/righr移动位置，直接给数值 */

        /* top: 0;  或  top:10px;  或  top:-10px; */

            /* 以浏览器顶端为基础，0为顶端，正数向下移动，负数向上移动 */

        /* left: 0;  或  left:10px;  或  left:-10px; */

            /* 以浏览器顶端为基础，0为左上顶端，正数向右移动，负数向左移动 */

        /* right: 0;  或  right:10px;  或  right:-10px; */

            /* 以浏览器顶端为基础，0为右上顶端，正数向左移动，负数向右移动 */

        /* bottom: 0;  或  bottom:10px;  或  bottom:-10px; */

            /* 以浏览器第一屏底端为基础，0为第一屏底端，正数向上移动，负数向下移动 */

                /* 加入父元素之后，还是在浏览器第一屏的右下角，并没有找父元素 */

                /* 当没有父元素 或者 父元素没有定位，参照物是浏览器窗口的第一屏 */

                /* 父元素定位之后，参照物会在父元素中移动 */

<!-- 默认时，多个盒子同时给了绝对定位之后，结构在后的盒子定位之后层在最上 -->

固定定位：

/* bottom: 0;  或  bottom:10px;  或  bottom:-10px; */

     /* 与绝对定位不同的点，bottom是以浏览器当前窗口底端为基础，会一直在浏览器的最低端 */

相对于窗口水平垂直居中

方法：添加定位、给宽高、top:50%、left:50%、margin-top：负的高度的一半、margin-left：负的宽度的一半

 

 

 

父相子绝：父级相对定位，子级绝对定位

    想要绝对定位的参照为是父元素，父元素可以是绝对定位，也可以是固定定位，同时也可以是相对定位，但是前面两个定位，会脱离文档流影响页面布局，所以常用于父元素给相对定位

产生的影响：

        会产生重叠效果

                1、相对定位的重叠：

                        如果只给一个元素添加定位，会产生重叠，定位的在上面， 但是调整不了后面被覆盖的元素的层级

                        如果所有元素都添加了定位，默认效果是后面覆盖前面的（根据HTML的顺次决定的）可以使用层级属性z-index调整

                2、绝对定位里面的重叠（兄弟元素之间）：

                        如果只给一个元素添加定位， 元素脱离文档流，后面的元素上去补位

                        如果所有元素都添加了定位，默认效果是后面覆盖前面的（根据HTML的顺次决定的）可以使用层级属性z-index调整

定位与浮动的区别

        不同点：浮动的脱离文档流，是半脱离，如果补位元素中有文本的话，会产生环绕效果

                     定位的脱离文档流，是全脱离，如果补位元素中有文本的话，直接被覆盖，不会产生环绕效果

        相同点：都可以让元素变成块级元素

                      补位元素没有内容，实现的效果是一样的