定位布局

定位布局是网页特殊排版的核心技术，用于实现元素叠加、悬浮固定、精准偏移等常规布局无法完成的效果，比如弹窗、悬浮按钮、顶部固定导航、图标角标等功能，全部依靠定位实现，是前端进阶布局必备知识点。

CSS定位分为四种模式，通过 position 属性切换，每种模式特性截然不同。静态定位static是默认模式，元素遵循标准文档流，无任何偏移效果，一般用于取消定位样式。相对定位relative，元素位置相对自身原始位置偏移，不脱离标准流，原始位置会保留，常用于微调元素位置、作为绝对定位父级。

绝对定位absolute是叠加布局核心，元素相对最近的定位父级偏移，完全脱离标准流，不占用页面空间。开发核心技巧：子绝父相，子元素设置绝对定位，父元素设置相对定位，既能精准控制偏移范围，又不影响整体页面布局，是角标、弹窗、悬浮图标通用写法。

固定定位fixed相对浏览器窗口定位，脱离标准流，页面滚动时元素位置保持不变，常用于顶部固定导航、底部悬浮按钮、回到顶部按钮，适配所有网页固定模块场景。

定位元素可通过top、bottom、left、right四个方向属性控制偏移距离，自由调整元素位置。多个定位元素叠加时，通过 z-index 属性控制层级，数值越大层级越高，显示在最上方，默认层级为0。需要注意只有定位元素支持z-index，静态定位无效。