CSS常用的两种定位方式

在CSS中，absolute 和 relative 是两种常用的定位方式，分别通过 position 属性进行设置。它们用于控制元素在页面中的位置。理解这两种定位方式对于布局和设计响应式页面非常重要。

`position: relative`

定义

relative 定位是相对自身原始位置进行偏移。

特性

元素仍然占据其在正常文档流中的空间，但可以通过 top, right, bottom, left 属性进行偏移。
偏移量是相对于元素本来的位置进行的。
不会影响其他元素的布局，因为它仍然保留在文档流中。

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Relative Position Example</title><style>.relative-box {position: relative;top: 20px; /* 相对于其原始位置向下偏移20像素 */left: 30px; /* 相对于其原始位置向右偏移30像素 */width: 100px;height: 100px;background-color: lightblue;}</style>
</head>
<body><div class="relative-box">Relative Box</div>
</body>
</html>

`position: absolute`

定义

absolute 定位是相对于最近的已定位（relative, absolute, fixed, sticky）祖先元素进行偏移。如果没有已定位的祖先元素，则相对于初始包含块（通常是视口）进行定位。

特性

元素脱离正常文档流，不再占据空间，其他元素会忽略它的位置。
通过 top, right, bottom, left 属性进行偏移，相对于最近的已定位祖先元素。
如果没有找到已定位的祖先元素，则相对于视口进行定位。

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Absolute Position Example</title><style>.container {position: relative;width: 200px;height: 200px;background-color: lightgray;}.absolute-box {position: absolute;top: 20px; /* 相对于最近的已定位祖先元素向下偏移20像素 */left: 30px; /* 相对于最近的已定位祖先元素向右偏移30像素 */width: 100px;height: 100px;background-color: lightblue;}</style>
</head>
<body><div class="container"><div class="absolute-box">Absolute Box</div></div>
</body>
</html>

比较与总结

position: relative：
- 相对自身原始位置进行偏移。
- 元素仍占据原始位置的空间。
- 用于微调元素位置，不会影响其他元素的布局。
position: absolute：
- 脱离文档流，相对于最近的已定位祖先元素进行定位。
- 不占据空间，其他元素会忽略它的位置。
- 用于精确定位元素，通常与 relative 定位的祖先元素配合使用。

结合使用

relative 和 absolute 定位经常结合使用，以实现复杂的布局效果。典型的用法是将容器元素设置为 relative 定位，而内部的子元素设置为 absolute 定位，这样子元素可以相对于容器元素进行定位。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Combined Position Example</title><style>.relative-container {position: relative;width: 300px;height: 300px;background-color: lightgray;}.absolute-child {position: absolute;top: 50px;left: 50px;width: 100px;height: 100px;background-color: lightblue;}</style>
</head>
<body><div class="relative-container"><div class="absolute-child">Child</div></div>
</body>
</html>