css相对定位和绝对定位

作者：断念已残发布日期:2025-02-06 浏览:95

/* 相对定位 */
.relative {
  position: relative;
  top: 20px;
  left: 30px;
}

/* 绝对定位 */
.absolute {
  position: absolute;
  top: 50px;
  left: 60px;
}

/* 解释说明:
相对定位 (position: relative):
- 元素依据其正常位置进行偏移。
- top 和 left 属性使得元素在其原始位置的基础上向下移动20px，向右移动30px。

绝对定位 (position: absolute):
- 元素相对于最近的已定位祖先元素进行定位；如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）。
- top 和 left 属性使得元素距离其最近的已定位祖先元素的上边和左边分别为50px和60px。如果没有任何已定位的祖先元素，则相对于视口的上边和左边。
*/

上一篇：css 弹性布局

下一篇：css relative