在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>
在這個例子中，.absolute-child 會相對于 .relative-container 的位置進行偏移，從而實現精確定位。
：ArrayList)
