在 CSS 中，元素的定位通过 position 属性控制，共有 5 种定位模式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和 sticky（粘性定位）。以下是基于 CSS 定位 的详细解析：
一、position: static（静态定位）
特点：
- 默认值，元素按照文档流（正常布局）排列，
top、right、bottom、left等定位属性无效。 - 元素的位置由 HTML 文档中的顺序决定，不受其他定位模式影响。
应用场景：
- 大多数普通元素的默认布局，无需特殊定位时使用。
二、position: relative（相对定位）
特点：
- 相对自身原有位置进行偏移，通过
top、right、bottom、left设置偏移量。 - 不脱离文档流，元素在文档流中的原始位置会被保留（占位），其他元素仍以原始位置布局。
- 不影响子元素的定位：若子元素设置
absolute，子元素会相对于该元素的原始位置定位（而非偏移后的位置）。
示例：
.box {
position: relative;
top: 20px; /* 向下偏移 20px */
left: 10px; /* 向右偏移 10px */
}
三、position: absolute（绝对定位）
特点：
- 脱离文档流，元素不再占据原位置，其他元素会忽略它的存在。
- 相对于最近的已定位祖先元素（祖先元素的
position不是static，即relative、absolute、fixed或sticky）定位：- 若祖先元素均未定位，则相对于 浏览器视口（根元素
<html>）定位。 - 若祖先元素有多层定位，以最近的一层定位祖先元素为基准。
- 若祖先元素均未定位，则相对于 浏览器视口（根元素
- 通过
top、right、bottom、left设置相对于基准元素的偏移量。 - 绝对定位会使元素具有行内块的特性 可以设置宽高
- 口诀：子绝父相
示例：
<div class="parent"> <!-- position: relative -->
<div class="child"> <!-- position: absolute -->
子元素相对于父元素定位
</div>
</div>
<style>
.parent {
position: relative; /* 父元素设置相对定位，作为子元素的定位基准 */
width: 200px;
height: 200px;
border: 1px solid #000;
}
.child {
position: absolute;
top: 50px;
left: 50px;
}
</style>
用绝对定位实现水平垂直居中
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;/*子元素的左上角出现在参照物的中间*/
transform: translate(-50%, -50%); /* 同时处理水平和垂直方向 */
}
四、position: fixed（固定定位）
特点：
- 完全脱离文档流，始终相对于浏览器视口定位，不随页面滚动而移动。
top、right、bottom、left以视口为基准，常用于实现导航栏、返回顶部按钮等固定位置的元素。- -固定定位会使元素具有行内块的特性 可以设置宽高
示例：
.fixed-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #333;
color: white;
}
五、position: sticky（粘性定位）
特点：
- 混合定位模式，元素在正常文档流中时表现为相对定位，当滚动到指定阈值时表现为固定定位。
- 需要结合
top、right、bottom、left中的至少一个属性来触发粘性效果（例如top: 0表示滚动到顶部时固定）。 - 兼容性：IE 浏览器不支持，现代浏览器（Chrome、Firefox 等）需添加
-webkit-前缀。
示例：
.sticky-header {
position: sticky;
top: 0; /* 滚动到顶部时固定 */
background: #f5f5f5;
padding: 10px;
}
关键对比总结
| 定位模式 | 是否脱离文档流 | 定位基准 | top/left 作用 |
|---|---|---|---|
static | 否 | 文档流默认位置 | 无效 |
relative | 否 | 自身原始位置 | 相对于自身偏移 |
absolute | 是 | 最近的已定位祖先元素或视口 | 相对于基准元素偏移 |
fixed | 是 | 浏览器视口 | 相对于视口固定位置 |
sticky | 部分（粘性时） | 正常流时为自身，粘性时为视口 | 滚动到阈值时固定 |
常见应用场景
- 模态弹窗：父元素
fixed覆盖全屏，子元素absolute居中显示。 - 吸顶导航栏：
sticky或fixed实现滚动时固定。 - 自定义下拉菜单：父元素
relative，子菜单absolute相对于父元素定位。 - 浮动元素布局：配合
z-index控制层叠顺序（z-index仅对定位元素有效）。
通过合理组合定位模式，可以实现复杂的页面布局效果。
六、z-index
在 CSS 中，z-index 用于控制定位元素（position 值为 relative、absolute、fixed 或 sticky）的层叠顺序（堆叠层级），决定元素在页面三维空间中（垂直于屏幕方向）的显示顺序。数值越大的元素会覆盖在数值较小的元素上方。
基本用法
.element {
position: relative; /* 或 absolute/fixed/sticky */
z-index: 1; /* 数值可为整数、负数或 0 */
}
关键特性
-
仅对定位元素生效
z-index只作用于设置了position为非static（即relative/absolute/fixed/sticky）的元素，否则属性无效。
-
层叠上下文（Stacking Context）
- 当元素形成层叠上下文时，其内部的
z-index只在该上下文中生效，不会影响外部元素。 - 触发层叠上下文的常见条件：
position为relative/absolute/fixed且z-index不为auto（默认值）。position为sticky（任意z-index）。display为flex/grid的父元素（且子元素有定位）。opacity值小于 1（opacity: 0.9）。transform值不为none（如transform: scale(1)）。
- 当元素形成层叠上下文时，其内部的
-
数值规则
- 数值越大，层级越高，覆盖数值小的元素。
- 支持负数（如
-1），表示元素层级低于普通文档流元素。 - 相同
z-index时，后渲染的元素覆盖先渲染的元素（DOM 结构中靠后的元素优先）。
层叠顺序优先级（从下到上）
- 背景和边框：父元素的背景和边框。
- 非定位元素：普通文档流中的元素（
position: static）。 - 定位元素（
z-index: auto或未设置）：层级由 DOM 顺序决定，后出现的覆盖先出现的。 - 定位元素（
z-index为具体数值）：数值越大，层级越高。 - 浏览器默认层：如
select元素、弹窗（alert/confirm）等始终在最上层。
示例：层级覆盖效果
<div class="parent">
<div class="child1">Child 1 (z-index: 1)</div>
<div class="child2">Child 2 (z-index: 2)</div>
</div>
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #000;
}
.child1, .child2 {
position: absolute;
width: 100px;
height: 100px;
opacity: 0.8;
}
.child1 {
background: red;
z-index: 1;
}
.child2 {
background: blue;
left: 50px;
top: 50px;
z-index: 2; /* 覆盖 Child 1 */
}
</style>
- 效果：蓝色方块（
z-index: 2）覆盖在红色方块（z-index: 1）上方。
常见问题与注意事项
-
层叠上下文的嵌套
- 若父元素形成层叠上下文（如设置了
z-index: 1），则其所有子元素的z-index仅在该上下文中比较，无法突破父元素的层级。
.parent { position: relative; z-index: 1; /* 形成层叠上下文 */ } .child { position: absolute; z-index: 100; /* 在父元素内部层级高，但无法超过未设置 z-index 的外部元素 */ } - 若父元素形成层叠上下文（如设置了
-
z-index与opacity的冲突- 若元素设置了
opacity < 1，则会触发层叠上下文，其子元素的z-index仅在该上下文中生效。
- 若元素设置了
-
select元素层级最高- 浏览器默认
select元素层级高于z-index控制的元素，若需覆盖select，需借助iframe或特殊 hack（如pointer-events: none）。
- 浏览器默认
总结
- 核心作用：控制定位元素的层叠顺序，数值大的元素覆盖数值小的。
- 生效前提：元素必须设置
position: relative/absolute/fixed/sticky。 - 最佳实践：
- 避免滥用
z-index，优先通过 DOM 顺序控制层级。 - 明确层叠上下文边界，防止嵌套层级混乱。
- 数值建议使用小整数（如
1、10、100），便于后期维护。
- 避免滥用
