css position relative

作者：／神經病／发布日期:2025-09-04 浏览:68

/* CSS */
.relative {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: lightblue;
}

.absolute {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 100px;
  background-color: lightcoral;
}

<!-- HTML -->
<div class="relative">
  <div class="absolute"></div>
</div>

解释说明：

position: relative;：将元素定位为相对定位。相对定位的元素会相对于它在正常文档流中的位置进行偏移，但不会脱离文档流，其占据的空间仍然会影响其他元素的布局。
position: absolute;：将元素定位为绝对定位。绝对定位的元素会相对于最近的已定位（非 static）的祖先元素进行定位。如果没有任何已定位的祖先元素，则相对于初始包含块（通常是视口）。在这个例子中，.absolute 元素是相对于 .relative 元素进行定位的。
在这个示例中，.relative 是一个相对定位的容器，而 .absolute 是一个绝对定位的子元素，它相对于 .relative 进行偏移。

上一篇：css top

下一篇：css sprites