css布局（定位）

定位

作用：1、特殊位置 2、覆盖效果
特点：你想把盒子放在哪里就放在哪里
定位类型：相对定位 绝对定位
定位方位值：left：；top：；
bottom：； right：；

相对定位

不会用作布局 用作轻微调整元素位置
参考位置：
相对于自身原来位置左上角 ，但是移动之后还是会保留原来的位置
（会给界面留下空白）-》不会用它作为布局

position:relative;
left：100px;
top: 100px;

relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。

绝对定位：会做布局

absolute： 对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
绝对定位是以距离它最近的拥有定位属性（relative or absolute）的父级元素来参考
参考位置：？默认是body的左上角，而不是浏览器窗口的左上角
可以使盒子发生位置变化，产生压盖效果

div结构越在下面的盒子层次越高越向前展示

<div class="box1"></div>
    <div class="box2"></div>

      .box1 {
            width: 200px;
            height: 200px； 
            background-color: red;
            /* 保留原先的位置，留下空白
             position: relative;
            left: 50px;
            top: 50px; */
            position: absolute;
            left: 50px;
            top: 50px;


        } 
        .box2 {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50px;
            top: 50px;
            background-color: skyblue;
    

        }

这里明显蓝色层级更高，蓝色盒子就在红色前面

/* 层级属性 就是调整盒子的前后展示 z-index：n*；/ n值越大层级越高，对应的结构就在更前面

**结论 子绝父相（这样网页布局更稳定）