定位定位的相关介绍以及基本使用、静态定位、相对定位、绝对定位、固定定位的特点、相关案例、元素的层级关系等

「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」

一、定位

1-1、基本介绍

可以让元素自由的摆放在网页的任意位置，一般用于盒子之间的层叠情况

常见场景：
1. 让某个元素层叠到其他盒子上面
2. 让盒子固定在屏幕中的某个位置

1-2、基本使用

1-2-1、设置定位方式

属性名：position
常见属性：

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

1-2-2、设置偏移值

偏移值设置分为两个方向：水平方向和垂直方向（各选择一个即可）

选取原则：就近原则

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

1-3、静态定位

静态定位是默认值，就是标准流

代码：position: static;
注意点：静态定位就是之前的标准流，不能通过方位属性进行移动！

1-4、相对定位

相对于自身之前的位置进行移动

代码：position: relative;
特点：
1. 需要配合方位属性实现移动
2. 相对于自己原来的位置进行移动
3. 在页面中占有位置，不脱离文档流
应用场景：
1. 常用于配合绝对定位
2. 用于小范围移动，微调元素自身位置

1-5、绝对定位

相对于非静态定位的父元素进行定位移动

代码：position: absolute;
特点：
1. 需要配合方位属性实现移动
2. 默认相对于浏览器可视区域进行移动
3. 在页面中不占位置，脱离了文档流
应用场景：
1. 实现“压盖”、“遮罩”效果
2. 配合JS实现动画

1-6、固定定位

相对于浏览器进行定位

代码： position: fixed;
特点：
1. 需要配合方位属性实现移动
2. 相对于浏览器可视区域进行移动
3. 在页面中不占位置，脱离了文档流
应用场景： 让盒子固定在屏幕中的某个位置

1-7、子绝父相

由于绝对定位的子元素会相对于非静态定位的父元素进行移动，往往会采取以下方式进行布局：

父元素采取相对定位（因为相对定位安全，不会脱离文档流影响原来的布局）
子元素采取绝对定位

1-7-1、案例1：让子盒子在父盒子之中进行水平垂直居中

子绝父相
让子盒子通过偏移值往右走大盒子的一半（left: 50%）
让子盒子通过偏移值往下走大盒子的一半（top: 50%）
让子盒子往左和往上走自己的一半（transform: translate(-50%, -50%)、或者采用margin负值的方式实现）

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .father {
        position: relative;
        width: 600px;
        height: 400px;
        background-color: pink;
      }

      .son {
        /* 1、子绝父相 */
        position: absolute;

        /* 2、让子盒子往右走大盒子一半 */
        left: 50%;

        /* 3、让子盒子往下走大盒子一半 */
        top: 50%;

        /* 4、让子盒子往左+往上走自己的一半 */
        /* transform: translateX(-50%); */
        /* transform: translateY(-50%); */
        /* 合写： */
        transform: translate(-50%,-50%);

        width: 200px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>
</html>

1-7-2、案例2：封面介绍半透明效果

效果图：

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .box {
        position: relative;
        width: 1226px;
        height: 600px;
        background-color: skyblue;
        margin: 0 auto;
      }

      .son {
        /* 子绝父相 */
        position: absolute;
        left: 0;
        bottom: 0;

        /* 注意点：绝对定位的元素会脱标，脱标之后的元素宽高默认由内容撑开 */
        width: 100%;
        height: 200px;
        background-color: rgba(0,0,0,.5);
      }

    </style>
  </head>
  <body>
    <div class="box">
      <div class="son">我是内容我是内容我是内容</div>
    </div>
  </body>
</html>

1-8、元素的层级关系

1-8-1、层级关系介绍

不同布局方式元素的层级关系为：

标准流<浮动<定位

不同定位之间的层级关系为：

相对、绝对、固定默认层级相同
HTML中写在下面的元素层级更高，会覆盖上面的元素

1-8-2、更改定位元素层级

属性名：z-index
属性值：数字（数字越大，层级越高）