CSS的position属性有五个值,它们分别是:static、relative、absolute、fixed和sticky。
static:这是默认值,元素按照正常的文档流进行定位。
relative:元素按照正常的文档流进行定位,然后相对于其原始位置进行偏移。
absolute:元素脱离文档流,并相对于最近的已定位祖先元素(而非通常的块父元素)进行定位。如果没有已定位的祖先元素,那么它将相对于初始包含块进行定位。
fixed:元素脱离文档流,并相对于浏览器窗口进行定位,即使页面滚动,它也不会移动。
sticky:这是一种混合类型,元素在滚动范围内表现为相对定位,而在滚动范围外表现为固定定位。
请注意,每种定位类型都有其特定的用途和行为,选择使用哪种定位类型取决于你的布局需求。
以下是一个使用不同position值的例子:
<!DOCTYPE html>
<html>
<head>
<style>
.relative {
position: relative;
top: 20px;
left: 20px;
}
.absolute {
position: absolute;
top: 50px;
left: 50px;
}
.fixed {
position: fixed;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="relative">我是相对定位的元素。</div>
<div class="absolute">我是绝对定位的元素。</div>
<div class="fixed">我是固定定位的元素。</div>
</body>
</html>