五大定位基础解释（绝对，相对，粘性，固定与静态 父绝子相）

5.定位

定位：position

定位分为五种定位：

1.静态定位：static 元素本身具有的定位

2.相对定位：relative 相对于自己本身的位置进行移动。有top,left,right.bottum的属性。

       /* 相对定位   相对于自己本来的位置改变 而自己本来的位置还保留 */
        .two {
            width: 100px;
            height: 100px;
            position: relative;
            top: 50px;
            left: 50px;
            background-color: pink;
        }

使用定位前：

可以看到这个盒子是紧紧地靠着浏览器的边缘。

使用定位后：

此盒子使用定位后可以看到，元素本身位置虽然改变，但是原来的位置还进行保留。且是相对于自己的本身的位置进行移动的。

3.绝对定位：absolute 相对于自己有相对定位的父级进行移动，一般用于子绝父相。

  <!-- 绝对定位 -->
    <div style="position: relative;background-color:skyblue;width: 100px;height: 100px;">
        <div class="three">12</div>
    </div>

        /* 绝对定位  相对于父元素进行移动 如果有父元素，但是父元素没有定位就相对于浏览器窗口进行移动  */
        /* 子绝父相 */
        .three {
            position: absolute;
            left: 20px;
            top: 20px;
            background-color: pink;
        }

使用定位前：

使用定位前还是块级元素。

使用定位后：

使用定位后可以看出元素相对于父元素盒子进行移动，前提是父元素具有相对定位或者固定定位。

并且绝对定位后的元素具有了行内块的性质。并且原来的位置会被新的元素所占用。

4.固定定位： fixed 相对于浏览器窗口是静止的，浏览器窗口在滚动，它的位置不会发生变化。

     
/* 固定定位  定位相对于浏览器窗口移动 不会随着浏览器窗口的滚动而滚动 */
.four {
            width: 100px;
            height: 50px;
            background-color: pink;
            position: fixed;
            top: 100px;
            left: 100px;
        }

定位前：

元素随着浏览器窗口的移动进行移动。

固定定位后：

元素不受浏览器窗口滚动的影响，且不占位置。

5.粘性定位： sticky 这个定位比较特殊，在到达它所设置的方位（left，top…）的位置之前，它跟浏览器的窗口一起滚动，到达所设置的位置时变成固定定位。不会随着浏览器窗口的滚动而滚动。

      /* 粘性定位  相对于 浏览器窗口移动 */
        .five {
            width: 200px;
            height: 100px;
            background-color: skyblue;
            position: sticky;
            top: 0px;
            left: 0;
            /* 在标准流的位置进行到距离上面0px时，位置不会改变 */
        }

使用定位前：

就是普通的静态定位效果。

使用粘性定位后：

元素到达所设定的位置时将脱离文档流，由静态定位转换为粘性定位。