HTML + CSS 连载 | 50 - 绝对定位元素的特点（上）一、将 position 设置为 absolute/f

站长

2024年10月08日 20:24 · 阅读数 52

一、将 position 设置为 absolute/fixed 元素的特点

官方文档中将 position 属性的属性值设置为 absolute/fixed 的元素成为绝对定位元素Absolute Positioned Element，注意要和绝对定位进行区分；将元素设置为绝对定位或者固定定位后，元素会有如下特点：

可以随意设置宽高，不设置宽和高的情况下宽高默认由内容决定
不再受标准流的约束，不再严格执行从上到下、从左到右的排布，不再严格区分块级、行内级，并且块级、行内级的很多特性都会消失
不再给父元素汇报宽高数据
脱标元素内部默认还是按照标准流布局

可以随意设置宽高

创建 HTML 页面，我们给 strong 元素设置为绝对定位，给 div.box 元素设置绝对定位，具体代码如下：

<!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>
    .container {
      width: 800px;
      height: 700px;
      background-color: #f00;
      position: relative;
    }

    .box {
      width: 500px;
      height: 500px;
      background-color: #0f0;

      /*绝对定位，位置相对于 .container*/
      position: absolute;
      right: 0;
      bottom: 0;
    }

    strong {
      /*绝对定位，位置相对于 .box*/
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: #00f;
    }

    img {
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">
      <span>我是span</span>
      <strong>我是strong</strong>
      <img src="../images/juejin.png" alt="" >
      <div>我是div</div>
    </div>
  </div>
</body>
</html>

打开 HTML 页面，效果如下：

HTML + CSS 连载 | 50 - 绝对定位元素的特点（上）一、将 position 设置为 absolute/f

接着我们给 strong 元素设置宽高，代码如下所示：

strong {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #00f;
  width: 100px;
  height: 40px;
}

刷新页面，效果如下：

HTML + CSS 连载 | 50 - 绝对定位元素的特点（上）一、将 position 设置为 absolute/f

可以看到在做了绝对定位后，strong 元素设置的宽和高生效了，原本 strong 作为一个行内元素是不能够设置宽高的。这是因为设置了绝对定位以后，strong 元素的类型表现符合 inline-block 元素的特性，因此可以随意设置宽高并且宽高默认由内容决定。

在没有设置宽高的时候，默认是包裹内容的，也就是说宽高由内容决定的。

需要注意的是设置了绝对定位以后，并不是把元素变成 inline-block 类型，并且也不需要在做 display: inline-block 这类设置了。

不再给父元素汇报宽高数据

设置为 absoulte/fixed 之后就脱离了标准流，不再严格按照从上到下、从左到右的顺序排列，不再有行内级元素块级元素等特点，一个比较显著的现象就是不再给父元素汇报宽高。

创建 HTML 页面，具体代码如下：

<!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>
    .box {
      background-color: #f00;
    }
  </style>
</head>
<body>
  <div class="box">
    <strong>我是strong</strong>
  </div>
</body>
</html>

刷新页面，效果如下：

HTML + CSS 连载 | 50 - 绝对定位元素的特点（上）一、将 position 设置为 absolute/f

当前 div.box 有一定的宽度和高度，设置 strong 为绝对定位，代码如下：

.box strong {
  position: absolute;
}

刷新页面，效果如下：

HTML + CSS 连载 | 50 - 绝对定位元素的特点（上）一、将 position 设置为 absolute/f

strong 设置绝对定位之前 div.box 的宽度和高度是由 strong 内容撑起来的，也就是说 strong 会向 div.box 汇报宽高数据，设置绝对定位之后，strong 脱离标准流就跟 div.box 没有关系了，并且位置是相对于视口，strong 元素也就不再属于 div.box 的子元素了，红色的盒子 div.box 也就没有了，也就是 div.box 压根就没有高度了。

脱标元素内部默认还是按照标准流布局

创建 HTML 页面，具体代码结构如下：

<!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>
    .box {
      background-color: #f00;
    }

    .box strong {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: #0f0;

    }
  </style>
</head>
<body>
  <div class="box">
    <strong>
      <!--strong的子元素依然按照标准排列-->
      <span>我是span</span>
      <i>我是i</i>
    </strong>
  </div>
</body>
</html>

刷新页面，效果如下：

HTML + CSS 连载 | 50 - 绝对定位元素的特点（上）一、将 position 设置为 absolute/f

strong 作为定位元素，但是他的子元素依然是按照原来的标准流，并没有发生任何变化。

转载自:https://juejin.cn/post/7295964269966983183