HTML + CSS 连载 | 50 - absolute/fixed 元素的特点

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

将元素设置为绝对定位或者固定定位后，元素会有如下特点：

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

可以随意设置宽高且宽高由内容决定

创建 HTML 页面，我们给 strong 元素设置为绝对定位，给 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>
    .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 页面，效果如下：

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

CSS 复制代码

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

刷新页面，效果如下：

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

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

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

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

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>

刷新页面，效果如下：

当前 box 有一定的宽度和高度，设置 strong 为绝对定位

css 复制代码

    .box strong {
      position: absolute;
    }

刷新页面，效果如下：

当前绝对定位依赖于视口

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

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

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>
      <span>我是span</span>
      <i>我是i</i>
    </strong>
  </div>
</body>
</html>

刷新页面，效果如下：

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