1. 定位概念

也是一种布局方式,可以让子元素自由摆放在页面中的任意位置(叠加效果)。

1.1. 使用

  1. 设置定位的方式:position属性。
  2. 设置偏移值:水平和垂直方向上就近各取一个,leftrighttopbottom

2. 相对定位

2.1. 概念

相对自己原来的位置进行移动。

2.2. 语法

position:relative

2.3. 示例

2.3.1. 定位前

CSS定位-LMLPHP

2.3.2. 定位后

CSS定位-LMLPHP

2.3.3. 代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>05-定位-相对定位</title>
    <style>
      .c1 {
        width: 200px;
        height: 200px;
        background: pink;
      }
      .c2 {
        width: 200px;
        height: 200px;
        background: #c6dacc;
        /* 对c2进行相对定位 */
        position: relative;
        top: 20px;
        left: 20px;
      }
      .c3 {
        width: 200px;
        height: 200px;
        background: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
  </body>
</html>

2.4. 特点

  1. 不会脱离文档流,元素位置的变化,也不会对其他元素产生任何影响。
  2. 定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
    规则:
  • 定位的元素会盖在普通元素之上。
  • 都发生定位的两个元素,后面的元素会覆盖前面的元素。
  1. left 不能和 right 一起设置, topbottom 不能一起设置。
  2. 相对定位的元素,也能继续浮动,但不推荐这样做。
  3. 相对行为的元素,也能通过 margin 调整位置,但不推荐这样做。
  4. 子绝父相(常用的布局技巧,可以让子元素在父元素任意位置上移动)。

3. 绝对定位

3.1. 概念

相对于最近有定位的祖先元素进行移动。

3.2. 语法

position: absolute

3.3. 特点

  1. 脱离文档流,会对后面的兄弟元素、父元素有影响。
  2. left 不能和 right 一起设置, topbottom 不能一起设置。
  3. 绝对定位、浮动不能同时设置,如果同时设置,浮动失效,以定位为主。
  4. 绝对定位的元素,也能通过 margin 调整位置,但不推荐这样做。
  5. 无论是什么元素(行内、行内块、块级)设置为绝对定位之后,都变成了定位元素。
  6. 父元素没有定位,就会一层层往上找,如果都没有,就参照浏览器body的左上角。

3.4. 示例

3.4.1. 定位前

CSS定位-LMLPHP

3.4.2. 定位后

父元素没有设置相对定位。

.son1 {
  width: 100px;
  height: 100px;
  background: #95a299;
  /* 对son1设置绝对定位*/
  position: absolute;
  top: 10px;
  left: 10px;
}

CSS定位-LMLPHP

父元素设置相对定位后。

.father {
  width: 400px;
  height: 400px;
  background: pink;
  /* 设置margin目的:让father和body进行区分,因为body也在左上角,让father稍微偏移一点 */
  margin: 100px;
  /* 对父元素设置相对定位 */
  position: absolute;
}

CSS定位-LMLPHP

4. 子绝父相

4.1. 概念

子元素设置绝对定位,父元素设置相对定位。

4.2. 作用

可以让子元素相对于父元素进行自由移动。

5. 小米半透明效果案例

在图片上加一个遮罩。

CSS定位-LMLPHP

5.1. 方式一

使用transform向上移动自身 100%。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>10-定位-小米半透明效果-方式一</title>
    <style>
      .box {
        width: 1226px;
        height: 600px;
        margin: 0 auto;
      }
      .box .cover {
        width: 1226px;
        height: 150px;
        background-color: black;
        opacity: 0.5;
        /* 使用transform向上移动自身100% */
        transform: translateY(-103%);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./images/bg1.jpg" alt="小米" />
      <div class="cover"></div>
    </div>
  </body>
</html>

5.2. 方式二

通过定位的子绝父相来实现。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>11-定位-小米半透明效果-方式二</title>
    <style>
      /* 通过子绝父相来实现 */
      .box {
        position: relative;
        width: 1226px;
        height: 600px;
        margin: 0 auto;
      }
      .box .cover {
        position: absolute;
        left: 0; /* 可写可不写 */
        bottom: 0;
        width: 1226px;
        height: 150px;
        background-color: black;
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./images/bg1.jpg" alt="小米" />
      <div class="cover"></div>
    </div>
  </body>
</html>

5.3. 方式三

对 cover,通过伪元素模拟生成,子绝父相来实现。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>12-定位-小米半透明效果-方式三</title>
    <style>
      /* 对cover,通过伪元素模拟生成,子绝父相来实现 */
      .box {
        position: relative;
        width: 1226px;
        height: 600px;
        margin: 0 auto;
      }
      .box::after {
        position: absolute;
        left: 0; /* 可写可不写 */
        bottom: 0;
        content: "";
        width: 1226px;
        height: 150px;
        background-color: black;
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./images/bg1.jpg" alt="小米" />
    </div>
  </body>
</html>

5.4. 方式四

img 使用背景图片生成。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>13-定位-小米半透明效果-方式四</title>
    <style>
      /* img使用背景图片生成 */
      .box {
        position: relative;
        width: 1226px;
        height: 600px;
        background: url(./images/bg1.jpg) no-repeat;
        margin: 0 auto;
      }
      .box::after {
        position: absolute;
        left: 0; /* 可写可不写 */
        bottom: 0;
        content: "";
        width: 1226px;
        height: 150px;
        background-color: black;
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

6. 固定定位

6.1. 概念

相对于浏览器进行的定位,让盒子固定在屏幕的某一个位置。

6.2. 语法

position: fixed

6.3. 特点

  1. 脱离文档流,会对后面的兄弟元素、父元素有影响。
  2. left 不能和 right 一起设置, topbottom 不能一起设置。
  3. 固定定位和浮动不能同时设置,如果同时设置,浮动失效,以固定定位为主。
  4. 固定定位的元素,也能通过 margin 调整位置,但不推荐这样做。
  5. 无论是什么元素(行内、行内块、块级)设置为固定定位之后,都变成了定位元素。

7. 层级关系

7.1. 不同布局之间的层级关系

标准流 < 浮动 < 定位(定位的优先级是最高的,可以叠加在其他元素之上)

7.2. 不同定位之间的层级关系

  1. 定位元素的显示层级比普通元素高,相对定位,绝对定位,固定定位优先级是相同的。
  2. 如果位置发生重叠,默认情况是:后面的元素,会覆盖前面元素。
  3. 可以通过 css 属性 z-index 调整元素的显示层级。z-index 的属性值是数字,没有单位,值越大显示层级越高。
  4. 只有定位的元素设置 z-index 才有效。
  5. 如果 z-index 值大的元素,依然没有覆盖掉 z-index 值小的元素,那么请检查其包含块的层级。
    定定位之后,都变成了定位元素。
03-21 06:02