HTML + CSS 连载 | 48 - 绝对定位-CSDN博客

本文链接：https://blog.csdn.net/JingnanJia/article/details/134152142

html+css.jpeg

一、绝对定位

当元素的position属性值设置为absolute时，则开启了元素的绝对定位。

创建 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>
    strong {
      position: absolute;
    }
  </style>
</head>
<body>
  <span>我是span元素</span>
  <strong>我是strong元素</strong>
  <img src="../images/juejin.png" alt="">
  <div>我是div元素</div>
</body>
</html>

在浏览器中打开 HTML 页面，具体效果如下：

可以通过 left right top bottom 进行定位，定位的参照对象是最临近的定位祖先元素，如果找不到这样的祖先元素，参照对象是视口。

定位元素 就是 position 不为 static 的元素，也就是 position 的值可以为 relative absolute fixed 元素。

strong 最临近的的祖先的定位元素就是 html，但是 html 不是一个定位元素。

添加如下 CSS 样式：

strong {
  position: absolute;
  /*没有祖先元素的情况下相对的是视口*/
  right: 0;
  top: 0;
}

刷新页面，效果如下：

修改该 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 {
      width: 800px;
      height: 600px;
      background-color: #00f;
    }

    strong {
      position: absolute;
      /*没有祖先元素的情况下相对的是视口*/
      /* right: 0;
      top: 0; */
    }
  </style>
</head>
<body>
  <div class="box">
    <span>我是span元素</span>
    <strong>我是strong元素</strong>
    <img src="../images/gouwujie01.jpg" alt="">
    <div>我是div元素</div>
  </div>
</body>
</html>

刷新页面，效果如下：

设置 img 大小，具体代码如下：

img {
  width: 100px;
  height: 100px;
}

刷新页面，效果如下：

给 strong 元素设置偏移量，具体代码如下：

strong {
 position: absolute;
 /*没有祖先元素的情况下相对的是视口*/
 right: 0;
 top: 0;
}

刷新页面，效果如下：

我们可以给 div 外面再嵌套一层，具体代码如下：

<!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: 1000px;
      height: 800px;
      background-color: #f00;
    }
    
    .box {
      width: 800px;
      height: 600px;
      background-color: #00f;
    }

    strong {
      position: absolute;
      /*没有祖先元素的情况下相对的是视口*/
      right: 0;
      top: 0;
    }

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

刷新页面，效果如下：

给新添加的 container 容器添加样式及定位信息，具体 CSS 代码如下：

    .container {
      width: 1000px;
      height: 800px;
      background-color: #f00;
      position: fixed;
    }

刷新页面，效果如下：

修改定位方式为 relative，具体代码如下：

    .container {
      width: 1000px;
      height: 800px;
      background-color: #f00;
      position: relative;
    }

再次刷新页面，效果如下：

给 box 设置相对定位：

    .box {
      width: 800px;
      height: 600px;
      background-color: #00f;
      position: relative;
    }

具体效果如下：

绝对定位的特点：

开启绝对定位后，如果不设置偏移量元素的位置不会发生变化。
开启绝对定位后，元素会从文档流中脱离。
绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开。
绝对定位会使元素提升一个层级。
绝对定位元素是相对于其包含块进行定位的。