css position absolute

作者：空白篇pia~ 发布日期:2025-08-28 浏览:57

<!DOCTYPE html>
<html>
<head>
<style>
/* 定义一个相对定位的容器 */
.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

/* 定义绝对定位的子元素 */
.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  background-color: #8FBC8F;
}
</style>
</head>
<body>

<h2>CSS Position Absolute 示例</h2>

<div class="relative">
  <div class="absolute">绝对定位元素</div>
</div>

<p>在这个例子中，绝对定位的元素相对于最近的已定位祖先元素（即设置了 position 属性且不是 static 的元素）进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是浏览器窗口）。</p>

</body>
</html>

解释说明：

.relative 类定义了一个相对定位的容器，它作为绝对定位元素的参照物。
.absolute 类定义了一个绝对定位的子元素，它使用 top 和 right 属性来指定其相对于最近的已定位祖先元素的位置。
如果没有已定位的祖先元素，绝对定位的元素将相对于初始包含块（通常是浏览器窗口）进行定位。

上一篇：css禁止点击

下一篇：div+css网页布局