【h5】相对定位和绝对定位

作者：System 时间：2024年08月08日分类：所有,css3 字数：700

这篇文章距离上次修改已过283天，其中的内容可能已经有所变动。

在HTML5中，相对定位和绝对定位是CSS的两种定位机制。

相对定位是一个非常常用的技术，它可以让你指定元素相对于它在文档中原始位置的移动。当你使用相对定位时，元素仍然占据它在文档流中的原始空间。




.box {
  position: relative;
  top: 20px; /* 向下移动20px */
  left: 40px; /* 向右移动40px */
}

绝对定位是一个更加强大的技术，它可以让你指定元素相对于其最近的已定位的（即非 static ）祖先元素的移动。如果没有已定位的祖先元素，那么它将相对于最初的包含块进行定位（通常是浏览器窗口）。使用绝对定位时，元素会从文档流中完全移除，并且可以重叠其他元素。




.container {
  position: relative;
}
 
.box {
  position: absolute;
  top: 20px; /* 相对于父元素向下移动20px */
  left: 40px; /* 相对于父元素向右移动40px */
}

在上述代码中，.box元素被定位在.container元素内部的右下角，即.container元素的右下角加上top: 20px和left: 40px。如果没有.container，.box元素将相对于最初的包含块，即浏览器窗口进行定位。