“父相子绝”，子代绝对定位父级元素必须为相对定位吗？

rubylLc

于 2024-05-09 15:44:33 发布

阅读量496

点赞数 4

文章标签： css

本文链接：https://blog.csdn.net/rubylLc/article/details/138615932

版权

在CSS中，绝对定位（position: absolute;）的元素会相对于其最近的已定位祖先元素（即position属性值不是static的元素）进行定位。如果绝对定位的元素没有已定位的祖先元素，那么它会相对于初始包含块（通常是HTML元素）进行定位。

这里“已定位”的祖先元素指的是：

position: relative;
position: absolute;
position: fixed;

所以，绝对定位的父级不必是相对定位。它可以是绝对定位或固定定位，或者如果没有任何已定位的祖先元素，它将相对于初始包含块定位。

1.绝对定位的几种父级元素定位

1.相对于相对定位的父元素

父元素相对定位，子代元素相对于最近的已定位祖先元素（即position属性值不是static的元素）进行定位，在下方示例代码中子元素相对于父元素向左向下分别偏移5vw。

<!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>
      .father {
        position: relative;
        background-color: pink;
        width: 100%;
        height: 20vw;
      }
      .son {
        position: absolute;
        left: 5vw;
        top: 5vw;
        background-color: skyblue;
        width: 10vw;
        height: 10vw;
      }
    </style>
  </head>
  <body>
    <div class="father">
      我是父亲
      <div class="son">我是儿子</div>
    </div>
  </body>
</html>

2.相对于绝对定位的父元素

父元素绝对定位，子代元素相对于最近的已定位祖先元素（即position属性值不是static的元素）进行定位，在下方示例代码中子元素相对于父元素向左向下分别偏移5vw，而父级元素的父级元素没有定位所以父级元素相较于html进行偏移向左向下分别偏移5vw，所以子元素视觉上相较于窗口向左向下分别偏移10（5+5）vw。

<!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>
      .father {
        position: absolute;
        left: 5vw;
        top: 5vw;
        background-color: pink;
        width: 100%;
        height: 20vw;
      }
      .son {
        position: absolute;
        left: 5vw;
        top: 5vw;
        background-color: skyblue;
        width: 10vw;
        height: 10vw;
      }
    </style>
  </head>
  <body>
    <div class="father">
      我是父亲
      <div class="son">我是儿子</div>
    </div>
  </body>
</html>

3.相对于初始包含块（通常是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>
      .son {
        position: absolute;
        left: 5vw;
        top: 5vw;
        background-color: skyblue;
        width: 10vw;
        height: 10vw;
      }
    </style>
  </head>
  <body>
    <div class="father">
      我是父亲
      <div class="son">我是儿子</div>
    </div>
  </body>
</html>

2.为什么子代元素绝对定位推荐父级元素使用相对定位

1.限制子元素位置

当子元素使用绝对定位时，它会脱离文档流，并相对于其最近的已定位祖先元素进行定位。如果父元素没有定位（即position属性为static），那么子元素将相对于初始包含块（通常是HTML元素）进行定位。而使用相对定位的父元素可以确保子元素的定位是相对于父元素本身，从而更容易控制子元素在父元素内的位置。

2.保持文档流

虽然绝对定位的子元素会脱离文档流，但相对定位的父元素仍然会保留在文档流中的空间。这意味着父元素仍然会占据页面上的空间，并且其他元素会围绕它进行布局。这有助于保持页面布局的完整性和一致性。

3.更灵活的布局

通过使用相对定位的父元素和绝对定位的子元素，可以实现更灵活和复杂的布局效果。父元素的相对定位可以为子元素提供一个参考点，而子元素的绝对定位则可以精确控制其在父元素内的位置。这种组合可以创建出各种复杂的布局结构，如弹出框、下拉菜单、选项卡等。

4.避免布局问题

如果没有使用相对定位的父元素，绝对定位的子元素可能会与其他元素重叠或导致布局混乱。而使用相对定位的父元素可以确保子元素始终位于父元素内部，并避免与其他元素发生冲突。

rubylLc

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
“父相子绝”，子代绝对定位父级元素必须为相对定位吗？

在CSS中，绝对定位（）的元素会相对于其最近的已定位祖先元素（即position属性值不是static的元素）进行定位。如果绝对定位的元素没有已定位的祖先元素，那么它会相对于初始包含块（通常是HTML元素）进行定位。所以，绝对定位的父级是相对定位。它可以是绝对定位或固定定位，或者如果没有任何已定位的祖先元素，它将相对于初始包含块定位。
复制链接

扫一扫