免费在线CSS Position定位可视化生成器，交互式演示static、relative、absolute、fixed、sticky五种定位模式。实时调整偏移值和z-index，可视化预览并一键复制CSS代码。 | 无需注册 · 纯前端运行
零依赖·可离线使用紫色块为目标元素，红色块为同级元素。滚动预览区域可测试sticky/fixed效果。
CSS position 属性是前端布局的核心属性之一，它决定了元素的定位方式。本工具帮助你可视化理解五种定位模式的区别，并生成对应的CSS代码。
top、right、bottom、left和z-index属性不生效。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有五种定位模式：static（默认，按文档流定位）、relative（相对定位，相对自身原始位置偏移）、absolute（绝对定位，相对最近的非static祖先元素定位）、fixed（固定定位，相对浏览器视口定位）、sticky（粘性定位，在滚动时在指定阈值切换relative和fixed）。
position:absolute的元素会相对最近的非static定位的祖先元素定位。如果所有祖先都是static，则相对初始包含块（通常是html元素）定位。这就是为什么通常需要给父元素设置position:relative来创建定位上下文。
position:fixed始终相对浏览器视口定位，滚动时元素固定不动。position:sticky则在正常文档流中，当滚动到指定阈值（如top:0）时变为fixed效果，当父容器滚出视口时又会恢复到正常流中。sticky需要指定至少一个top/right/bottom/left值才生效。
z-index只对非static定位的元素（relative、absolute、fixed、sticky）生效。static定位的元素即使设置了z-index也不会起作用。z-index值越大，元素越靠上显示。相同z-index时，后面的元素覆盖前面的。
可以。本工具生成的代码遵循标准CSS语法，可以直接复制到你的样式表中使用。工具会根据你选择的定位模式和偏移值生成完整的position属性代码。