css绝对定位

作者：最终一次颓废发布日期:2026-05-05 浏览:124

/* CSS绝对定位示例 */

/* 定义一个父容器 */
.parent {
  position: relative; /* 父容器设置为相对定位，以便子元素可以基于它进行绝对定位 */
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

/* 定义一个子元素，使用绝对定位 */
.child {
  position: absolute; /* 子元素设置为绝对定位 */
  top: 20px;          /* 距离父容器顶部20px */
  left: 30px;         /* 距离父容器左边30px */
  width: 100px;
  height: 50px;
  background-color: lightblue;
}

解释说明：

position: relative;：应用于父容器 .parent，使其成为一个参考点，允许其子元素根据它的位置进行绝对定位。
position: absolute;：应用于子元素 .child，使其脱离正常的文档流，并根据最近的已定位祖先元素（这里是 .parent）进行定位。如果没有已定位的祖先元素，则相对于浏览器窗口定位。
top, left：用于指定子元素相对于父容器的位置。

上一篇：css布局

下一篇：css框架