定位

CSS Position

样式与 CSS也叫：position、绝对定位、相对定位、固定定位

一句话：用 position 属性让元素脱离正常的排列顺序，按指定偏移量摆放，常用于角标、悬浮按钮和固定导航栏。

详细解释

元素默认按文档顺序一个接一个排列，position 可以改变这一点：relative 相对自身原位置偏移，原位置保留；absolute 相对最近的已定位祖先元素摆放，不占原来的位置；fixed 相对浏览器窗口固定，滚动也不动；sticky 滚到某个位置后粘住不动，也就是吸顶。

最常用的组合是「子绝父相」：父元素设 position: relative，子元素设 position: absolute 加 top: 8px; right: 8px，就能把角标、关闭按钮放在卡片右上角。忘了给父元素设 relative，子元素就会跑到别处。

定位决定元素放在哪，重叠时谁盖住谁由层级决定。能用 Flex、Grid 解决的布局，不要用绝对定位硬摆。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

商品卡片右上角加一个「新品」角标：卡片设为相对定位，角标用绝对定位放在距顶部和右侧各 8px 处，不影响卡片内其他内容的排列；页面右下角的客服按钮用固定定位，距底部和右侧各 24px，滚动时不动。