css 绝对定位

作者：影之哀伤发布日期:2025-03-12 浏览:342

/* CSS 绝对定位示例 */

/* 定义一个相对定位的父容器 */
.parent {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: lightblue;
}

/* 定义一个绝对定位的子元素 */
.child {
  position: absolute;
  top: 20px; /* 距离父容器顶部 20px */
  left: 40px; /* 距离父容器左边 40px */
  width: 100px;
  height: 50px;
  background-color: salmon;
}

解释说明：

.parent 是一个相对定位的容器，它的作用是为绝对定位的子元素提供一个参考点。绝对定位的元素会相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于初始包含块（通常是浏览器窗口）。
.child 是一个绝对定位的元素，它通过 top 和 left 属性来确定其在父容器中的位置。这里 top: 20px 表示子元素距离父容器顶部 20px，left: 40px 表示距离父容器左边 40px。

如果你需要进一步了解或有其他问题，请告诉我！

上一篇：css滚动条

下一篇：css背景透明