满分观察网友z

满分观察网友z

关注
发信
关注(28)粉丝(399)

CSS定位

1. 定位概念

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

1.1. 使用

  1. 设置定位的方式：position属性。
  2. 设置偏移值：水平和垂直方向上就近各取一个，left 、 right 、 top 、 bottom 。

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 一起设置， top 和 bottom 不能一起设置。
  2. 相对定位的元素，也能继续浮动，但不推荐这样做。
  3. 相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。
  4. 子绝父相(常用的布局技巧，可以让子元素在父元素任意位置上移动)。

3. 绝对定位

3.1. 概念

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

3.2. 语法

position: absolute

3.3. 特点

  1. 脱离文档流，会对后面的兄弟元素、父元素有影响。
  2. left 不能和 right 一起设置， top 和 bottom 不能一起设置。
  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 一起设置， top 和 bottom 不能一起设置。
  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
Powered by LMLPHP ©2024 满分观察网友z 0.008553