CSS定位布局position详解：相对,绝对和固定定位
1. 定位布局概述
在网页设计中，CSS的position属性是一个核心的布局工具，用于控制元素在页面中的定位方式。通过position属性，可以手动控制元素在其包含块中的精确位置，实现元素的精确布局、创建浮动效果、实现元素的层叠等多种效果。定位布局使我们能够把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置，让开发者可以自由地在某个盒子内移动元素位置或者将元素固定在屏幕中的某个位置。
使用定位布局需要指定元素的定位模式，并配合设置边偏移量来决定元素最终的显示位置。边偏移属性包括top、right、bottom和left，它们分别设置元素距离包含块顶部、右侧、底部和左侧的距离。
2. position属性基础
position属性规定元素的定位类型，所有主流浏览器都支持该属性。position属性有五个主要取值：
static：静态定位（默认值）relative：相对定位absolute：绝对定位fixed：固定定位sticky：粘性定位
2.1 静态定位(static)
static是position属性的默认值。当元素的position属性值为static时，元素按照正常的文档流进行布局，不会有任何特殊的定位行为。元素在页面中依次排列，前一个元素的结束位置就是下一个元素的开始位置。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>在上述代码中，三个div元素会依次垂直排列在页面中，这就是static定位的效果。对于静态定位的元素，设置top、bottom、left、right或z-index属性都不会产生任何效果。
3. 相对定位(relative)
相对定位使元素相对于其正常位置进行偏移。元素仍然保留在文档流中，不会影响其他元素的布局。
3.1 相对定位的特点
相对定位具有以下特点：
- 改变位置的参照物是元素自己原来的位置
- 不脱离文档流，仍然占据原来的空间
- 标签的显示模式特点不会改变
- 需要配合top、right、bottom、left属性来实现位置偏移
3.2 相对定位示例
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
.relative-box {
position: relative;
top: 20px;
left: 30px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="box">第一个盒子</div>
<div class="box relative-box">相对定位的盒子</div>
<div class="box">第三个盒子</div>
</body>
</html>在这个示例中，第二个盒子使用了相对定位，相对于其在文档流中的原始位置向下移动20像素，向右移动30像素。需要注意的是，其他元素在布局时仍然会按照该元素原始位置进行排列，不会受到偏移的影响。
相对定位的常见应用场景包括：
- 微调元素位置
- 作为绝对定位子元素的参考（子绝父相）
4. 绝对定位(absolute)
绝对定位使元素完全脱离文档流，并相对于最近的已定位祖先元素进行定位。
4.1 绝对定位的特点
绝对定位具有以下特点：
- 完全脱离文档流，不再占据原始位置
- 参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，则参照浏览器可视区
- 显示模式特点改变：宽高生效（具备了行内块的特点）
- 未设置宽度时适应内容宽度
4.2 绝对定位示例
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
background-color: lightgray;
margin: 50px;
}
.absolute-box {
position: absolute;
width: 100px;
height: 50px;
background-color: lightcoral;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="container">
父容器
<div class="absolute-box">绝对定位的盒子</div>
</div>
</body>
</html>在这个示例中，绝对定位的盒子相对于其父容器（设置了position: relative）进行定位，位于父容器内部距离顶部50px、左侧50px的位置。
4.3 绝对定位的包含块
绝对定位的元素会找祖先元素中第一个定位元素（position值不是static的元素），以该元素的填充盒作为其包含块。如果找不到任何定位的祖先元素，则包含块为整个网页（初始化包含块）。
5. 固定定位(fixed)
固定定位使元素固定在浏览器窗口的某个位置，不会随着页面的滚动而移动。元素脱离文档流，并且始终相对于浏览器窗口进行定位。
5.1 固定定位的特点
固定定位具有以下特点：
- 脱离文档流，不占据页面空间
- 参照物是浏览器窗口
- 显示模式特点具备行内块特点
- 页面滚动时元素的位置不会改变
5.2 固定定位示例
<!DOCTYPE html>
<html>
<head>
<style>
.fixed-box {
position: fixed;
top: 10px;
right: 10px;
width: 100px;
height: 50px;
background-color: lightgoldenrodyellow;
border: 1px solid #ccc;
text-align: center;
line-height: 50px;
}
.content {
height: 1500px;
padding: 20px;
}
</style>
</head>
<body>
<div class="fixed-box">固定定位盒子</div>
<div class="content">
<p>这里是一些很长很长的文本，用于模拟页面滚动。</p>
<p>这里是一些很长很长的文本，用于模拟页面滚动。</p>
<p>这里是一些很长很长的文本，用于模拟页面滚动。</p>
</div>
</body>
</html>无论页面如何滚动，固定定位的盒子都会始终固定在浏览器窗口的右上角。固定定位的常见应用场景包括：导航菜单、侧边栏、弹窗、浮动广告等。
6. 粘性定位(sticky)
粘性定位是relative和fixed定位的结合。在页面滚动过程中，元素在屏幕范围内时，按照正常的文档流进行布局；当滚动到特定位置时，元素会固定在屏幕上的某个位置。
6.1 粘性定位的特点
粘性定位具有以下特点：
- 在特定阈值前表现为相对定位，之后表现为固定定位
- 依赖于用户的滚动行为
- 需要指定至少一个阈值（top、right、bottom或left）
6.2 粘性定位示例
<!DOCTYPE html>
<html>
<head>
<style>
.sticky-header {
position: sticky;
top: 0;
background-color: lightgray;
padding: 10px;
border-bottom: 1px solid #333;
}
.content {
height: 1500px;
padding: 20px;
}
</style>
</head>
<body>
<div class="content">
<p>页面开始处的一些内容。</p>
<div class="sticky-header">这是一个粘性头部</div>
<p>这里是一些很长很长的文本，用于模拟页面滚动。</p>
<p>这里是一些很长很长的文本，用于模拟页面滚动。</p>
<p>这里是一些很长很长的文本，用于模拟页面滚动。</p>
</div>
</body>
</html>当页面滚动时，sticky-header元素会在到达视口顶部时粘在那里，直到其父元素完全滚出视口。需要注意的是，粘性定位可能会在某些情况下失效，例如当粘性元素比其滚动容器大，或者父元素设置了overflow属性为hidden、scroll或auto时。
7. 定位实战技巧
7.1 子绝父相
“子绝父相”是CSS定位中常用的技巧，指子元素使用绝对定位，父元素使用相对定位。这样做的目的是让子元素相对于父元素进行定位，同时父元素仍然保持在文档流中，对页面布局影响最小。
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
position: relative;
width: 300px;
height: 200px;
background-color: lightgreen;
margin: 50px;
}
.child {
position: absolute;
width: 100px;
height: 50px;
background-color: lightblue;
top: 20px;
left: 30px;
}
</style>
</head>
<body>
<div class="parent">
父元素（相对定位）
<div class="child">子元素（绝对定位）</div>
</div>
</body>
</html>7.2 定位实现居中
使用绝对定位或固定定位可以实现元素的水平和垂直居中。
<!DOCTYPE html>
<html>
<head>
<style>
.center-box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 200px;
height: 100px;
margin: auto;
background-color: lightpink;
text-align: center;
line-height: 100px;
}
.container {
position: relative;
height: 300px;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="container">
<div class="center-box">居中盒子</div>
</div>
</body>
</html>这种方法通过将元素的四个定位属性都设置为0，然后设置margin为auto，浏览器会自动分配外边距，从而实现居中效果。
另一种常用的居中方法是使用transform属性：
<!DOCTYPE html>
<html>
<head>
<style>
.center-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: lightpink;
text-align: center;
line-height: 100px;
}
.container {
position: relative;
height: 300px;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="container">
<div class="center-box">居中盒子</div>
</div>
</body>
</html>8. 堆叠顺序(z-index)
当多个定位元素重叠时，可以使用z-index属性控制元素的堆叠顺序。z-index的取值是整数，默认值为0，取值越大显示顺序越靠上。
8.1 z-index使用示例
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: absolute;
width: 200px;
height: 150px;
opacity: 0.8;
}
.box1 {
background-color: lightcoral;
top: 50px;
left: 50px;
z-index: 1;
}
.box2 {
background-color: lightblue;
top: 100px;
left: 100px;
z-index: 2;
}
.box3 {
background-color: lightgreen;
top: 150px;
left: 150px;
z-index: 3;
}
</style>
</head>
<body>
<div class="box box1">z-index: 1</div>
<div class="box box2">z-index: 2</div>
<div class="box box3">z-index: 3</div>
</body>
</html>在这个示例中，z-index值最大的盒子（box3）显示在最上面，z-index值最小的盒子（box1）显示在最下面。
需要注意的是：
- 只有定位元素（position值不是static）设置z-index才会生效
- z-index可以为负数，当z-index为负数时，如果遇到常规流元素或浮动元素，这个定位元素会被覆盖
9. 不同定位方式对比
下表总结了CSS中不同定位方式的特点：
| 定位方式 | 参照物 | 是否脱离文档流 | 是否影响其他元素 | 常见应用场景 |
|---|---|---|---|---|
| static | 正常文档流 | 否 | 否 | 默认布局 |
| relative | 自身原始位置 | 否（占位） | 否 | 微调元素、作为绝对定位参考 |
| absolute | 最近定位祖先 | 是（不占位） | 否 | 悬浮元素、精确位置控制 |
| fixed | 浏览器窗口 | 是（不占位） | 否 | 固定导航、悬浮按钮 |
| sticky | 最近滚动祖先 | 否（占位直到粘住） | 否 | 粘性头部、侧边栏 |
10. 总结
CSS的position属性为网页布局提供了强大的控制能力。通过static、relative、absolute、fixed和sticky这几种定位方式，可以满足各种复杂的页面布局需求。合理运用这些定位方式，能够更加精准地控制元素的位置，创造出更加吸引人的网页布局和交互效果。
需要注意的是，定位并不是一种用来做主要页面布局的方式，它更适合用于管理和微调页面中的一个特殊项的位置。对于整体的页面布局，建议优先考虑Flexbox或Grid布局，再结合定位布局进行微调。
本篇教程知识点总结
| 知识点 | 知识内容 |
|---|---|
| position属性作用 | 控制元素在页面中的定位方式，实现精确布局 |
| static定位 | 默认定位方式，元素按照正常文档流排列 |
| relative定位 | 相对于自身原始位置偏移，不脱离文档流 |
| absolute定位 | 相对于最近定位祖先元素定位，脱离文档流 |
| fixed定位 | 相对于浏览器窗口定位，不随页面滚动而移动 |
| sticky定位 | 相对定位和固定定位的结合，依赖滚动行为 |
| 子绝父相 | 子元素绝对定位，父元素相对定位的常用技巧 |
| 定位居中 | 使用绝对定位和margin:auto或transform实现居中 |
| z-index | 控制定位元素的堆叠顺序，数值越大越靠上 |
| 应用场景 | 精确定位、固定导航、悬浮元素、粘性头部等 |