css left

作者：寂寞味道发布日期:2025-04-07 浏览:66

/* 使用 left 属性进行定位 */

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

/* 子元素设置绝对定位，并使用 left 属性 */
.child {
  position: absolute;
  left: 20px; /* 子元素距离父容器左边距 20px */
  top: 20px; /* 子元素距离父容器上边距 20px */
  width: 100px;
  height: 100px;
  background-color: lightcoral;
}

解释说明：

position: relative;：将父容器设置为相对定位，这样子元素的绝对定位会相对于父容器进行定位。
position: absolute;：将子元素设置为绝对定位，使其可以相对于最近的已定位父元素进行定位。
left: 20px;：设置子元素距离父容器左边的距离为 20px。
top: 20px;：设置子元素距离父容器上边的距离为 20px。

通过这种方式，你可以精确控制子元素在父容器中的位置。

上一篇：css var()

下一篇：css平行四边形