CSS 定位生成器

选择 position 取值并设置 top、right、bottom、left 与 z-index,实时预览元素在参照容器中的定位表现,并一键复制对应的 CSS 代码,全部在浏览器本地完成。

参数设置 可实时预览

偏移量可填写纯数字(自动补 px)、带单位数值或百分比;留空表示 auto。position 为 static 时偏移与 z-index 均不生效。

实时预览
参照容器 占位元素(文档流)
定位元素

预览以带虚线边框的容器作为参照,观察定位元素相对它的位置变化。

生成的 CSS
positionrelative
偏移top 0 left 0
z-index1
文档流保留占位

          

复制后可直接粘贴到样式表中,选择器默认为 .box。

使用规则
  • absolute 会相对最近一个 position 不为 static 的祖先元素定位,若不存在则相对初始包含块。
  • relative 与 sticky 不会脱离文档流,原位置仍被占用。
  • 同时设置 top 与 bottom 时,在高度受限的场景下两者可能同时生效。
  • z-index 只对定位元素以及某些布局项生效,静态元素设置无效。
  • 偏移量留空时按 auto 处理,表示由浏览器自动计算。