css定位

css的定位一共有三种：
相对定位 relative
绝对定位 absolute
固定定位 fixed

相对定位

position：relative；
相对与自己原来的位置定位，进行位置的调整。
特点不脱离标准文档流，还占着位置，别人挤不走
不会影响别的元素
做绝对定位的参考
与margin的区别
margin会影响后面的元素

div{
            height: 200px;
            width: 200px;
            display: inline-block;
        }
        .div1{
            background-color: aqua;
            margin-left: 100px;
        }
        .div2{
            background-color: black;
        }

绝对定位

 .div1{
            background-color: aqua;
           position: relative;
           left: 100px;
        }

把div1换成相对定位

绝对定位不会挤走别div2，会遮盖住div2
相对定位一般做绝对定位的参考，子绝父相

绝对定位

position：absolute；
一个绝对定位的元素，如果祖先元素中出现了已定位的元素，那么将以该元素为参考点。

1.以最近的已经定位的祖先元素，不一定是父容器，也可以是爷爷。

2.不一定是相对对位，任何定位信息，都可以做子容器的参考点。

3.使用最多的子绝父相。

4.以父容器的border内侧点为参考点，进行定位。

当父级标签没有定位元素的话，就会向上一级找，直到body

.div1{
            height: 200px;
            background-color: chartreuse;
            margin-top: 200px;
        }
        .div2 {
            height: 100px;
            width: 100px;
            background-color: aqua;
            position: absolute;
            top: 50px;
            left: 100px;

<div class="div1">
        <div class="div2"> </div>
    </div>

父级都没有定位元素，就会以body为参考

当父级有定位元素时

         .div1{
            height: 200px;
            background-color: chartreuse;
           position: relative;
           left: 50px;
           top: 50px;
        }
        .div2 {
            height: 100px;
            width: 100px;
            background-color: aqua;
            position: absolute;
            top: 50px;
            left: 100px;
        }

<div class="div1">
        <div class="div2"></div>
    </div>

div2以div1为参考点（div1为div2的父级）

div2会以div1的左上角为参照点

应用：

1.压盖效果，一个div压在另一个div上面。

2.绝对定位的盒子居中。 left:50%;margin-left: -自身宽度的一半;

固定定位

position： fixed；
相对浏览器进行定位，无论页面怎么滚动， 这个盒子显示的位置不变。

 div {
            height: 200px;
        }

        body {
            background-color: cadetblue;
        }

        .div1 {
            width: 100%;
            height: 200px;
            background-color: chartreuse;
            position: fixed;

            top: 50px;
        }

  <div class="div1"> </div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

用途：

1.网页返回顶部，侧边广告。

2.顶部固定导航条

z-index 属性

z-index 属性 是定位元素专用的。 属性值是数字，数值大的会压盖住数值小的
不设置时默认是0 ，顺序在后的覆盖顺序在前的

 .div1 {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            position: absolute;
            top: 50px;
          
        }
        .div2{
            height: 200px;
            width: 200px;
            background-color: black;
            position: absolute;
            top: 10px;
        }

<div class="div1"> </div>
<div  class="div2"></div>

当div1设置 z-index属性大于div2的 z-index时

  .div1 {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            position: absolute;
            top: 50px;
            z-index: 2;
        }

        .div2 {
            height: 200px;
            width: 200px;
            background-color: black;
            position: absolute;
            top: 10px;
            z-index: 1;
        }

1. z-index都没有值或值相同的时候，写在后面的盒子会盖住前面的盒子。

2.数值大的会盖住数值小的，z-index是一个自然数，默认为0.

3.从父现象：大家都有z-index的值的时候，会比较父容器的z-index，如果父1比父2大，就算儿子2比儿子1大，儿子1也能压住儿子2。