top 顶部偏移属性

最后更新：2026-09-13

top top 顶部偏移属性

top 属性用于定义定位元素从其包含块顶部边缘向上的偏移量。它仅对 position 值为 relative、absolute、fixed 或 sticky 的元素生效，用于精确控制元素在垂直方向上的位置。

分类
初始值	auto
继承	否
适用于	positioned
可动画	length
CSS 版本	CSS2
状态	标准

📝 语法

top: auto | <length> | <percentage>;

⚙️ 取值

值	类型	描述
`auto`	关键字	无偏移
`<length> \| <percentage>`	类型	相对包含块的偏移值

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
top	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

注意： top 仅对非 static 的定位元素生效，对 position: static 的元素设置 top 不会产生任何效果。

提示： 百分比值相对于包含块的高度计算，auto 则表示由浏览器根据其他属性自动计算位置。

❓ 常见问题

Q同时设置 top 和 bottom 会怎样？

A分情况：absolute/fixed 且不设 height 时，元素高度被拉伸填满 top 与 bottom 之间，形成自适应高度；relative 时 top 生效、bottom 被忽略。同时设了 height 则 top 生效、bottom 失效。此特性常用于父容器内上下拉伸的元素（通栏背景等）。

Qtop 的百分比是相对于谁的？

Atop 的百分比相对包含块高度计算。absolute 的包含块是最近定位祖先的 padding box；fixed 是视口；relative 相对自身原始位置。如 top:50% 让元素上边缘位于包含块高度一半处，常配合 transform:translateY(-50%) 实现垂直居中。

Q为什么 top 不生效？

A最常见原因是元素没有定位：top 只对 position 为 relative、absolute、fixed 或 sticky 的元素生效，static（默认）元素上的 top 完全无效。另外检查值是否有效（auto/长度/百分比）、是否被 height 等属性覆盖。先确认 position，再查偏移计算。

Q如何用 top:50% 实现垂直居中？

A元素 position:absolute（父容器 position:relative），top:50% 让上边缘落在容器一半处，再 transform:translateY(-50%) 上移自身高度一半，即实现垂直居中。注意 transform 移动的是元素自身的 50%，与 top 百分比不同。