css绝对定位和相对定位
推荐
在线提问>>
CSS定位属性允许您控制元素在页面中的位置。其中，绝对定位和相对定位是两种最常用的定位方式。
相对定位：
相对定位通过指定一个元素相对于其原始位置的位置来定位该元素。它通过使用 position: relative 来实现，同时使用 top，bottom，left，right属性来移动元素。在使用相对定位时，元素仍然占据其原始位置，因此在页面上仍会占用相应的空间。
例如：
<div style="position: relative; top: 10px; left: 20px;">
这是一个相对定位的 div 元素
</div>
上述代码中的 div 元素将相对于其原始位置向下移动 10px，向右移动 20px。
绝对定位：
绝对定位通过指定元素相对于其最近的已定位祖先元素的位置来定位该元素。如果没有已定位的祖先元素，则相对于 body 元素进行定位。它通过使用 position: absolute 来实现，同时使用 top，bottom，left，right 属性来移动元素。在使用绝对定位时，元素不再占据其原始位置，因此在页面上不会占用相应的空间。
例如：
<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 20px;">
这是一个绝对定位的 div 元素
</div>
</div>
上述代码中的 div 元素将相对于其最近的已定位祖先元素(即外部的相对定位的 div 元素)向下移动 10px，向右移动 20px。
需要注意的是，使用绝对定位时，元素的位置将相对于其最近的已定位祖先元素进行计算。如果没有已定位的祖先元素，则元素的位置将相对于页面的左上角进行计算。
