定位与浮动
约 1732 字大约 6 分钟
cssposition
2026-04-16
1. position 属性详解
position 属性用于指定一个元素的定位类型,决定元素在页面中的排列方式。
1.1 static(静态定位)
默认值。元素按照正常文档流排列,没有特殊的定位效果。
.element {
position: static;
}- 元素不会被
top、right、bottom、left属性定位 - 始终按照正常布局流的位置显示
1.2 relative(相对定位)
相对于元素自身正常位置进行定位。
.element {
position: relative;
top: 20px;
left: 30px;
}- 元素保留在正常文档流中的位置
- 使用
top、right、bottom、left相对于自身位置偏移 - 偏移不会影响其他元素的布局
1.3 absolute(绝对定位)
相对于最近的已定位祖先元素(position不为static)进行定位。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}- 元素脱离正常文档流(不占位)
- 如果没有已定位的祖先元素,则相对于初始包含块(
html)定位 - 常用于需要精确控制位置的场景,如下拉菜单、模态框等
1.4 fixed(固定定位)
相对于视口(viewport)进行定位。
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}- 元素脱离正常文档流
- 滚动页面时,元素位置始终相对于视口保持不变
- 常用于固定导航栏、回到顶部按钮等
1.5 sticky(粘性定位)
元素在跨越特定阈值前是相对定位,之后变为固定定位。
.sticky-nav {
position: sticky;
top: 60px;
}- 元素在阈值前表现为
relative - 滚动越过阈值后表现为
fixed - 常用于分组标题粘性吸附效果
/* 完整的粘性定位示例 */
.sticky-header {
position: sticky;
top: 0;
background: #fff;
padding: 10px;
border-bottom: 1px solid #eee;
}2. 定位上下文(Containing Block)
定位上下文是用于计算元素定位属性(top、right、bottom、left)的参考框。
2.1 确定定位上下文
元素的定位上下文确定规则:
| 元素 position 值 | 定位上下文 |
|---|---|
static / relative | 最近的块级祖先元素 |
absolute | 最近的已定位祖先元素(position不为static) |
fixed | 视口(viewport) |
sticky | 最近的滚动祖先 |
2.2 定位上下文计算
.container {
position: relative; /* 建立定位上下文 */
width: 500px;
height: 300px;
}
.box {
position: absolute;
top: 20px;
right: 20px;
/* 相对于 .container 计算位置 */
}2.3 百分比计算
使用top、right、bottom、left时的百分比相对于定位上下文计算:
.parent {
position: relative;
width: 400px;
height: 200px;
}
.child {
position: absolute;
top: 50%; /* 相对于父元素 height: 200px -> 100px */
left: 25%; /* 相对于父元素 width: 400px -> 100px */
}3. z-index 与层叠上下文(Stacking Context)
3.1 z-index 属性
z-index属性指定元素的堆叠顺序,值越大越靠前。
.modal {
z-index: 1000;
}
.dropdown {
z-index: 500;
}- 仅对定位元素(
position不为static)有效 - 可以是负数,越小的越在底层
- 支持
auto、0、正整数
3.2 层叠上下文(Stacking Context)
层叠上下文是HTML元素在三维空间中的层级组织方式。
创建层叠上下文的条件:
- 根元素(
html) position为absolute或relative且z-index不为autoposition为fixed或stickyz-index不为auto的flex子项opacity小于1的元素transform不为none的元素filter不为none的元素mix-blend-mode不为normal的元素isolation为isolate的元素will-change指定了任意属性
3.3 层叠顺序(从低到高)
+------------------------------------------+
| 层叠顺序(从低到高) |
+------------------------------------------+
| 1. 背景和边框(层叠上下文根部) |
| 2. 负 z-index 的子元素(从小到大) |
| 3. 块级盒子(normal flow 中的块级元素) |
| 4. 浮动盒子 |
| 5. 行内盒子(normal flow 中的inline) |
| 6. z-index: 0 的子元素 |
| 7. 正 z-index 的子元素(从小到大) |
+------------------------------------------+3.4 层叠上下文特性
.parent {
position: relative;
z-index: 1; /* 创建层叠上下文 */
}
.child-1 {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.child-2 {
position: absolute;
top: 0;
left: 100px;
z-index: 5;
}在层叠上下文中,子元素按照上述规则进行层叠比较,层叠上下文与外部元素独立比较。
4. 浮动(Float)
4.1 float 的历史背景
浮动最初设计用于实现文字环绕图片的效果:
img {
float: left;
margin-right: 15px;
}<img src="photo.jpg" alt="照片" />
<p>文字内容会环绕在图片周围...</p>4.2 float 的取值
.float-left {
float: left;
}
.float-right {
float: right;
}
.float-none {
float: none;
}4.3 浮动特性
- 元素脱离正常文档流,向左或向右移动直到碰到边缘
- 后续内容会环绕浮动元素
- 可以实现多列布局(但已被 Flexbox 和 Grid 取代)
4.4 clearfix 清除浮动
浮动元素会导致父元素高度塌陷,需要清除浮动。
方法一:使用 clear 属性
.clearfix::after {
content: '';
display: block;
clear: both;
}方法二:使用 overflow
.parent {
overflow: hidden; /* 或 auto */
}方法三:使用 ::after 伪元素(推荐)
.clearfix::after {
content: '';
display: table; /* 或 block */
clear: both;
}4.5 现代布局替代方案
Flexbox 布局
.flex-container {
display: flex;
gap: 20px;
}
.flex-item {
flex: 1;
}Grid 布局
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}对比:
| 特性 | float | Flexbox | Grid |
|---|---|---|---|
| 学习曲线 | 低 | 中 | 中 |
| 二维布局 | 需借助其他技巧 | 否 | 是 |
| 一维布局 | 需借助其他技巧 | 是 | 是 |
| 响应式 | 需媒体查询 | 简单 | 简单 |
| 现代兼容 | 需清除浮动 | 良好 | 良好 |
5. 居中布局的各种实现方案对比
5.1 水平居中
行内元素或文字
.text-center {
text-align: center;
}块级元素(定宽)
.block-center {
margin-left: auto;
margin-right: auto;
}Flexbox
.flex-center {
display: flex;
justify-content: center;
}5.2 垂直居中
Flexbox(推荐)
.flex-vertical-center {
display: flex;
align-items: center;
}绝对定位
.absolute-vertical-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}Grid
.grid-vertical-center {
display: grid;
align-items: center;
}5.3 水平垂直居中
Flexbox(最简洁)
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}绝对定位 + transform
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Grid
.grid-center {
display: grid;
place-items: center; /* 简写 */
}margin: auto(需父容器有明确尺寸)
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}5.4 实现方案对比
| 方案 | 适用场景 | 兼容性 | 代码简洁度 |
|---|---|---|---|
text-align: center | 文字/行内元素 | 优秀 | 简洁 |
margin: auto | 块级定宽 | 优秀 | 简洁 |
| Flexbox | 任何场景 | 良好 | 简洁 |
Grid place-items | 任何场景 | 良好 | 最简洁 |
| 绝对定位 + transform | 已知尺寸 | 良好 | 中等 |
position: absolute + margin: auto | 已知父容器尺寸 | 优秀 | 复杂 |
5.5 示例:完整居中布局
/* 方案一:Flexbox */
.flex-center-box {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* 方案二:Grid */
.grid-center-box {
display: grid;
place-items: center;
min-height: 100vh;
}
/* 方案三:绝对定位 */
.absolute-center-box {
position: relative;
min-height: 100vh;
}
.absolute-center-box > .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}参考文章:
