学习前端第八天

position定位

position:
1. static(默认）：没有定位。
2.relative相对定位：
如果没有偏移量，对元素本身没有任何影响。
不是元素脱离文档流。
不影响其他元素布局。
做绝对定位的参考位。
left，right，top，bottom是相对于当前元素自身进行偏移的。

      position：relative；
      left：100px；
      bottom:100px;

3.absolute绝对定位：
使元素脱离文档流。
找一个参考系，定义横纵坐标。默认是在父容器或者浏览器的左上角或左下角。横坐标用left，right 纵坐标用top和bottom.
以盒子为参考点：
一个绝对定位的元素，如果祖先元素中出现了已定位的元素，那么将以该元素为参考点。
以最近的已经定位的祖先元素，不一定是父容器，也可以是爷爷。
不一定是相对定位，任何定位信息，都可以做子容器的参考点。
使用最多的子绝父相。
以父容器的border内侧点为参考，进行定位。
应用：
压盖效果，一个div压在另一个div上面。
绝对定位的盒子居中：left：50%；margin-left:自身宽度的一半。

 .father{
              width: 1200px;
              height: 300px;
              background-color: red;
              position:relative;
              }
   .son{
            width: 300px;
            height: 300px;
            position: absolute;
            left: 300px;
            /*left: 50%;
            margin-left: -150px;*/
                  }
        

4.fixed固定定位：
相对浏览器进行定位，无论页面怎么滚动， 这个盒子显示的位置不变。
网页返回顶部，侧边广告。
顶部固定导航条。

position: fixed;
  top: 0;
  left: 0;

5.z-index 属性 是定位元素专用的。 属性值是数字，数值大的会压盖住数值小的 。
z-index都没有值或值相同的时候，写在后面的盒子会盖住前面的盒子。
数值大的会盖住数值小的，z-index是一个自然数，默认为0.
从父现象：大家都有z-index的值的时候，会比较父容器的z-index，如果父1比父2大，就算儿子2比儿子1大，儿子1也能压住儿子2。