position:absolute relative sticky介绍
时间: 2025-06-09 10:26:19 浏览: 12
### CSS中position属性的absolute、relative和sticky值的用法及区别
#### 1. `position: absolute;` 的用法及特点
当元素设置为 `position: absolute;` 时,该元素会脱离文档流,不再占据正常布局中的空间。其位置是相对于最近的已定位(非 `static`)祖先元素进行计算的。如果没有这样的祖先元素,则相对于初始包含块(通常是浏览器窗口)。
例如,如果一个父元素设置了 `position: relative;` 或其他定位方式,那么子元素的 `absolute` 定位将基于此父元素[^1]。
```html
<div style="position: relative;">
<div style="position: absolute; top: 20px; left: 30px;">绝对定位内容</div>
</div>
```
#### 2. `position: relative;` 的用法及特点
`position: relative;` 会使元素相对于自身原本的位置进行偏移,但不会脱离文档流,仍然占据原来的空间。其他元素不会因为它的偏移而受到影响。
可以通过设置 `top`, `right`, `bottom`, `left` 等属性来调整元素的位置[^1]。
```html
<div style="position: relative; top: 20px; left: 30px;">相对定位内容</div>
```
#### 3. `position: sticky;` 的用法及特点
`position: sticky;` 是一种特殊的定位方式,结合了 `relative` 和 `fixed` 的特性。当元素在视口内时,它表现为 `relative` 定位;当滚动到特定位置时,它会固定在某个位置,类似于 `fixed` 定位。
需要配合 `top`, `bottom`, `left`, `right` 等属性使用,以定义触发粘性定位的边界[^3]。
```html
<div style="position: sticky; top: 0;">粘性定位内容</div>
```
#### 4. 区别总结
- **`absolute`**:完全脱离文档流,根据最近的已定位祖先元素或初始包含块进行定位。
- **`relative`**:不脱离文档流,相对于自身原始位置进行偏移。
- **`sticky`**:在视口范围内表现为 `relative`,超出视口范围后表现为 `fixed`。
### 示例代码
以下是一个综合示例,展示三种定位方式的效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>position 示例</title>
<style type="text/css">
.container {
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
}
.absolute {
position: absolute;
top: 50px;
left: 50px;
background-color: yellow;
}
.relative {
position: relative;
top: 20px;
left: 20px;
background-color: lightblue;
}
.sticky {
position: sticky;
top: 0;
background-color: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="absolute">Absolute</div>
<div class="relative">Relative</div>
<div class="sticky">Sticky</div>
</div>
</body>
</html>
```
阅读全文
相关推荐

















