ZhenYu's 知识库

外观

定位与浮动

约 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不为auto
  • position为fixed或sticky
  • z-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;
}

对比：

特性floatFlexboxGrid
学习曲线低中中
二维布局需借助其他技巧否是
一维布局需借助其他技巧是是
响应式需媒体查询简单简单
现代兼容需清除浮动良好良好

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%);
}

参考文章：