Day08

1.定位

1.1.相对定位

 position: relative;

相对定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。

1.2.绝对定位

position: absolute;

①绝对定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。

position: fixed;

②元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：

1.3.用定位实现元素垂直水平居中

.parent{
            width: 200px;
            height: 200px;
            background: red;
            position: relative;
        }
.child{
            width: 50px;
            height:50px;
            background: blue;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -25px;
            margin-top: -25px;
        }

父元素一定要给相对定位或者绝对定位，否则元素相对于根元素即html元素定位。

1.4.z-index

position:absolute;
left:0px;
top:0px;
z-index:-1;

z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
tips： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。