免费在线CSS Position定位可视化生成器，交互式演示static、relative、absolute、fixed、sticky五种定位模式。实时调整偏移值和z-index，可视化预览并一键复制CSS代码。 | 无需注册 · 纯前端运行
零依赖·可离线使用选择定位模式
实时预览
紫色块为目标元素，红色块为同级元素。滚动预览区域可测试sticky/fixed效果。
参数设置
预设场景
CSS 代码
CSS Position定位详解
CSS position 属性是前端布局的核心属性之一，它决定了元素的定位方式。本工具帮助你可视化理解五种定位模式的区别，并生成对应的CSS代码。
五种定位模式
- static（默认）：元素按正常的文档流排列，
top、right、bottom、left和z-index属性不生效。 - relative（相对定位）：元素相对自身在正常文档流中的位置进行偏移，偏移不影响其他元素的位置（原位置仍保留空间）。
- absolute（绝对定位）：元素脱离文档流，相对最近的非static定位的祖先元素定位。如果没有非static祖先，则相对初始包含块（通常是）定位。
- fixed（固定定位）：元素脱离文档流，相对浏览器视口定位，滚动页面时元素固定不动。
- sticky（粘性定位）：元素在正常文档流中，当滚动到达指定阈值时表现为fixed，当父容器滚出视口时又恢复到正常流。需要设置至少一个
top/right/bottom/left值。
常见应用场景
模态框/弹窗居中：使用position:absolute配合top:50%; left:50%; transform:translate(-50%,-50%)实现水平垂直居中。
固定导航栏：使用position:sticky; top:0实现滚动时导航栏吸顶效果，比fixed更自然因为它在到达阈值前是正常文档流。
悬浮按钮：使用position:fixed将操作按钮固定在视口右下角，不受页面滚动影响。
层叠效果：通过z-index控制非static定位元素的层叠顺序，数值越大越靠上。
使用技巧
创建定位上下文：给父元素设置position:relative但不设置偏移，可以让子元素的absolute定位相对父元素而非整个页面。
sticky的坑：sticky定位的元素会被限制在父容器内，如果父容器设置了overflow:hidden，sticky可能不生效。
z-index层级：z-index只对非static定位的元素生效，且在不同层叠上下文中比较时可能不符合预期。
CSS position有哪些定位模式？
CSS position有五种定位模式：static（默认，按文档流定位）、relative（相对定位，相对自身原始位置偏移）、absolute（绝对定位，相对最近的非static祖先元素定位）、fixed（固定定位，相对浏览器视口定位）、sticky（粘性定位，在滚动时在指定阈值切换relative和fixed）。
position absolute相对哪个元素定位？
position:absolute的元素会相对最近的非static定位的祖先元素定位。如果所有祖先都是static，则相对初始包含块（通常是html元素）定位。这就是为什么通常需要给父元素设置position:relative来创建定位上下文。
position sticky和fixed有什么区别？
position:fixed始终相对浏览器视口定位，滚动时元素固定不动。position:sticky则在正常文档流中，当滚动到指定阈值（如top:0）时变为fixed效果，当父容器滚出视口时又会恢复到正常流中。sticky需要指定至少一个top/right/bottom/left值才生效。
z-index在什么情况下才生效？
z-index只对非static定位的元素（relative、absolute、fixed、sticky）生效。static定位的元素即使设置了z-index也不会起作用。z-index值越大，元素越靠上显示。相同z-index时，后面的元素覆盖前面的。
生成的CSS代码可以直接用在项目中吗？
可以。本工具生成的代码遵循标准CSS语法，可以直接复制到你的样式表中使用。工具会根据你选择的定位模式和偏移值生成完整的position属性代码。