定位（子绝父相）

（1）块级元素独占一行 → 垂直布局（2）行内元素/行内块元素一行显示多个 → 水平布局可以让原本垂直布局的块级元素变成水平布局（1）可以让元素自由的摆放在网页的任意位置（2）一般用于盒子之间的层叠情况4.定位的常见应用场景（1）解决盒子与盒子之间的层叠问题 → 定位之后元素层级最高，可以层叠在其他盒子上（2）可以让盒子始终固定在屏幕中的某个位置1.属性名：position2.常见属性值：（1）

你想要那颗糖

3677人浏览 · 2023-03-12 22:58:12

你想要那颗糖 · 2023-03-12 22:58:12 发布

一、网页常见布局方式

1. 标准流

（1）块级元素独占一行 → 垂直布局

（2）行内元素/行内块元素一行显示多个 → 水平布局

2. 浮动： 可以让原本垂直布局的块级元素变成水平布局

3. 定位

（1）可以让元素自由的摆放在网页的任意位置

（2）一般用于盒子之间的层叠情况

4.定位的常见应用场景

（1）解决盒子与盒子之间的层叠问题 → 定位之后元素层级最高，可以层叠在其他盒子上

（2）可以让盒子始终固定在屏幕中的某个位置

二、设置定位方式

1.属性名：position

2.常见属性值：

（1）静态定位：static

（2）相对定位：relative

（3）绝对定位：absolute

（4）固定定位：fixed

3. 设置偏移值

（1）偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

（2）选取的原则一般是就近原则（离哪边近用哪个）

三、静态定位

1.原理：静态定位是默认值，就是之前认识的标准流。

2.属性名：position:static;

3.注意点：

（1）静态定位就是之前标准流，不能通过方位属性进行移动

（2）之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定

四、相对定位

1.原理：自恋型定位，相对于自己之前的位置进行移动

2.属性名：position:relative；

3.特点：

（1）需要配合方位属性实现移动

（2）相对于自己原来位置进行移动

（3）在页面中占位置 → 没有脱标

4.应用场景：

（1）配合绝对定位组CP（子绝父相）

（2）用于小范围的移动

五、绝对定位

1.原理：拼爹型定位，相对于非静态定位的父元素进行定位移动

2.代码：position:absolute；

3. 特点：

（1）需要配合方位属性实现移动

（2）默认相对于浏览器可视区域进行移动

（3）在页面中不占位置 → 已经脱标

4.应用场景：常用于配合绝对定位组CP（子绝父相）

5.绝对定位相对于谁移动？

（1）祖先元素中没有定位 → 默认相对于浏览器进行移动

（2）祖先元素中有定位 → 相对于最近的有定位的祖先元素进行移动

六、子绝父相

1.原理：让子元素相对于父元素进行自由移动

2.含义：子元素：绝对定位；父元素：相对定位

3.子绝父相好处：父元素是相对定位，则对网页布局影响最小

4.子绝父绝特殊场景

在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可！父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局

七、固定定位

1.原理：死心眼型定位，相对于浏览器进行定位移动

2.代码：position:fixed；

3.特点：

（1）需要配合方位属性实现移动

（2）相对于浏览器可视区域进行移动

（3）在页面中不占位置 → 已经脱标

4.应用场景：让盒子固定在屏幕中的某个位置

八、元素间的层级关系

1.不同布局方式元素的层级关系：标准流 < 浮动 < 定位

2.不同定位之间的层级关系：相对、绝对、固定默认层级相同；此时HTML中写在下面的元素层级更高，会覆盖上面的元素

3.更改定位元素的层级

（1）场景：改变定位元素的层级。相对定位绝对定位固定定位层级相同，它是根据html标签书写的先后顺序有关系，后面会覆盖前面的元素.

（2）属性名：z-index

（3）属性值：数字；数字越大，层级越高；取值为:auto|数值;默认值是auto。为数值的时候千万别加单位px.

九、代码展示

1.子绝父相代码展示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>子绝父相</title>
    <style>
      /* 子绝父相:
        子元素使用绝对定位,父元素使用相对定位.让子元素相对于父元素进行自由的移动位置
        好处:对网页布局影响比较小.
    */
    .father{
      /* 1.若父元素设置为绝对定位的时候,会脱标,不占位置,底下的模块会自动上浮,页面紊乱 */
      /* position: absolute; */
      position: relative;
      /* 2.若父元素设置为相对定位,子元素会相对于父元素移动位置,对页面影响较小,推荐使用!!! */
      width: 300px;
      height: 300px;
      background-color: pink;
    }
    .son{
      width: 100px;
      height: 100px;
      background-color: aqua;
    }
    footer{
      height: 100px;
      background-color: palegreen;
    }
    </style>
  </head>

  <body>
    <div class="father">
      <div class="son"></div>
    </div>
    <footer></footer>
  </body>
</html>

2.子绝父绝代码展示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>子绝父绝(扩展)</title>
    <style>
      /*使用子绝父相时, 发现父元素有绝对定位,那么父元素里面的子元素直接给绝对定位即可,了解 */
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .father{
        /* 相对定位 */
        position: relative;
        width: 600px;
        height: 600px;
        background-color: pink;
      }
      .son{
        /* 绝对定位 */
        position: absolute;
        /* 相对定位 */
        /* position: relative; */
        right: 0;
        bottom: 0;
        width: 300px;
        height: 300px;
        background-color: aqua;
      }
      .sun{
        /* 绝对定位 */
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100px;
        height: 100px;
        background-color: palevioletred;
      }

      /* 使用子绝父相时,若是父元素有绝对定位,那么父元素里面的子元素直接给绝对定位即可,就是不要随意去更改定位属性 */
    </style>
  </head>

  <body>
    <div class="father">
      <div class="son">
        <div class="sun"></div>
      </div>
    </div>
  </body>
</html>

3.绝对定位的遮罩层效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>遮罩层</title>
    <style>
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .box{
        /* 子绝父相 */
        position: relative;
        width: 1226px;
        height: 600px;
        background: url(./images/bg.jpg);
        margin: 100px auto 0;
      }

      .box::after{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 160px;
        background-color: rgba(0,0,0,0.3); 
        content: "";
      }
    </style>
  </head>
  <body>
    <div class="box">
      
    </div>
  </body>
</html>

遮罩层效果展示：

4.扩展-定位特殊性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>扩展-定位特殊性</title>
    <style>
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      span{
        position: absolute;
        /* 行内元素设置绝对定位/固定定位之后,可以直接设置宽高 */
        width: 100px;
        height: 200px; 
        background-color: pink;
      }

      div{
        /* 块级元素设置了绝对定位/固定定位,如果不给宽高,默认由内容撑开 */
        /* width: 100px;
        height: 100px; */
        position: absolute;
        left: 0;
        top: 0;
        background-color: aqua;
        margin: 50px auto;
      }

      /* 固定定位/绝对定位的相同特点是脱标 */
    </style>
  </head>
  <body>
    <span>定位的特殊性</span>
    <div>哈哈哈哈你好啊</div>
  </body>
</html>

5.元素的层级关系

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素的层级关系(扩展)</title>
    <style>
      /* 标准流 < 浮动 < 定位 */
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div{
        width: 200px;
        height: 200px;
      }
      .one{
        position: relative;
        top: 10px;
        left: 20px;
        z-index: 3;
        background-color: pink;
      }

      .two{
        position: absolute;
        top: 30px;
        left: 40px;
        z-index: 2;
        background-color: aqua;
      }

      .three{
        position: fixed;
        top: 50px;
        left: 60px;
        z-index: 1;
        background-color: yellowgreen;
      }

      /* 相对定位 绝对定位 固定定位层级相同,他是根据html标签写的先后顺序关系决定的,后面的回复该前面的元素.
      如何解决?
        可以通过'z-index'属性解决,只有定位才拥有'z-index'属性;
        取值为auto/数值;默认是auto,取值为数值的时候别加单位. */
    </style>
  </head>
  <body>
    <!-- 网页布局方式:标准流 浮动 定位 -->
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </body>
</html>