CSS 绝对定位揭秘：简明扼要的理解

2024-01-29 03:13:44

虽然 CSS 绝对定位是个老生常谈的话题，但对于初学者来说，它仍然是一个谜。本文旨在通过一个生动形象的例子，让大家对绝对定位有一个深入浅出的理解。

假设我们有三个嵌套的 DIV 元素，如以下代码所示：

<div id="parent">
  <div id="child1">子元素 1</div>
  <div id="child2">子元素 2</div>
</div>

默认情况下，这些元素会垂直排列，一个在另一个的上方。但是，如果我们要让 #child2 覆盖 #child1 呢？这就是绝对定位的用武之地了。

绝对定位的原理

绝对定位将元素从常规文档流中移除，并允许我们指定其相对于父元素或视口的精确位置。通过设置以下 CSS 样式，我们可以让 #child2 绝对定位：

#child2 {
  position: absolute;
}

现在，#child2 已经脱离了常规文档流，我们可以通过 top、right、bottom 和 left 属性来指定其确切位置。

案例演示

为了说明绝对定位，我们创建一个简单页面，其中两个平级的 DIV 元素一上一下地排列在父 DIV 中。

<!DOCTYPE html>
<html>
<head>
  <style>
    #parent {
      width: 500px;
      height: 500px;
      background-color: #ccc;
      display: flex;
      flex-direction: column;
    }
    #child1 {
      width: 200px;
      height: 200px;
      background-color: #f00;
      margin: auto;
    }
    #child2 {
      position: absolute;
      top: 50px;
      left: 50px;
      width: 100px;
      height: 100px;
      background-color: #0f0;
    }
  </style>
</head>
<body>
  <div id="parent">
    <div id="child1">子元素 1</div>
    <div id="child2">子元素 2</div>
  </div>
</body>
</html>