CSS定位布局详解（四种定位+层级控制）
文档流布局、浮动布局只能实现常规的流式排列，无法完成元素精准定位、叠加层级、悬浮固定等特殊布局需求。CSS定位position属性可以脱离常规文档流约束，自由控制元素在页面中的精准位置，是实现悬浮按钮、弹窗、导航固定、图标叠加、侧边悬浮等特效的核心技术。CSS提供四种基础定位方式，每种定位的参照物、文档流特性、使用场景完全不同。
第一种：静态定位 position: static。所有元素的默认定位方式，遵循标准文档流规则，无任何定位偏移效果，top、left、right、bottom、z-index等定位属性全部失效。日常开发中几乎不会主动设置，仅用于重置其他定位样式。
第二种：相对定位 position: relative。参照物为元素自身默认位置，通过top/left等属性进行偏移。核心特性：不脱离标准文档流，保留原始占位空间，周围元素不会发生位置变动。偏移后元素仅视觉移动，实际占位还在原位置。单独使用场景较少，核心作用是给绝对定位子元素提供定位参照物，是子绝父相布局的核心基础。
第三种：绝对定位 position: absolute。参照物为最近一层开启定位（非static）的父级元素，如果无已定位父级，则相对于浏览器窗口根元素定位。核心特性：完全脱离标准文档流，不保留占位，会悬浮在普通元素上方，可实现元素叠加布局。支持上下左右四个方向自由偏移，配合margin居中可以实现任意元素精准居中。高频用法：图片角标、弹窗、悬浮提示、模块内部叠加元素。
第四种：固定定位 position: fixed。参照物为浏览器可视窗口，不受父元素、页面滚动影响。核心特性：彻底脱离文档流，无占位，页面滚动时元素位置始终固定在屏幕指定位置。常用于全局固定导航栏、返回顶部按钮、侧边悬浮客服、弹窗遮罩层等全局固定组件。
核心开发口诀：子绝父相，是前端精准布局最常用的规范。父元素设置relative相对定位（保留占位、不影响布局），子元素设置absolute绝对定位（依托父元素精准偏移、实现叠加效果），既保证整体布局稳定，又能实现局部精准定位。
层级控制 z-index：仅对已开启定位（relative/absolute/fixed）的元素生效，用于控制叠加元素的上下层级。属性值为整数，数值越大，层级越高，元素越靠上；数值越小越靠下。默认层级为0，同级定位元素，后写的元素默认层级更高。开发中禁止设置过大数值，按需逐级设置，避免层级混乱、弹窗被遮挡等问题。
定位position用于精准控制元素位置，四种定位方式：
1、static默认定位，正常文档流，无偏移；2、relative相对定位，相对于自身原始位置偏移，不脱离文档流，保留占位；3、absolute绝对定位，相对于最近已定位父级，脱离文档流，无占位；4、fixed固定定位，相对于浏览器窗口，固定不动，常用于导航、返回顶部按钮。
核心口诀：子绝父相（子元素绝对定位、父元素相对定位），是页面精准布局核心写法。z-index控制定位元素层级，数值越大层级越高，仅对定位元素生效。
