定位布局

一、定位基础概念

1. 定位属性 position
   作用：改变元素默认摆放规则，搭配偏移属性 top / left / right / bottom 实现自由拖拽布局。
   5 种取值：
   1.static：静态定位（默认）
   2.relative：相对定位
   3.absolute：绝对定位
   4.fixed：固定定位
   5.sticky：粘性定位
   配套偏移属性
   top / left / right / bottom：控制元素向上下左右偏移多少像素，只有非 static 定位才生效。
   层级控制 z-index
   ·仅对 relative / absolute / fixed / sticky 生效
   ·值越大层级越高，会覆盖下层元素；默认 z-index:0
   二、5 种定位详细拆解

2. static 静态定位（默认）
   ·所有元素原生状态，遵循标准流布局，从上到下、从左到右排列
   ·top/left/z-index 全部失效，无法手动偏移
   ·开发中几乎不会手动写 position:static
   css
   div {
   position: static;
   left: 50px; /* 无效 */
   }

3. relative 相对定位（自身原位为参照物）
   核心特点
   1.参照物：元素自己原本在标准流里的位置
   2.不脱离标准流：原来占的位置会保留，后面盒子不会挤上来
   3.偏移规则：top 向下、left 向右（负数反向移动）
   css
   .box {
   position: relative;
   top: 20px; /* 相对于自身原位置向下移20px /
   left: 30px; / 相对于自身原位置向右移30px */
   }

两大用途
1.微调元素位置（图标、文字小偏移）
2.给绝对定位当父级参照物（最常用）
3. absolute 绝对定位（最近非 static 父级为参照物）
核心特点
1.脱离标准流：原来占的空间直接消失，下方元素会往上填充空位
2.参照物规则：向上查找第一个设置了 relative/absolute/fixed/sticky 的父元素；若无，则以浏览器视口（页面根 html）为参照
3.必须搭配 top/left/right/bottom 才会产生偏移
css
/* 父盒子 /
.father {
position: relative; / 作为子元素的定位参照物 /
width: 500px;
height: 500px;
}
/ 子盒子绝对定位 /
.son {
position: absolute;
right: 10px;
bottom: 10px; / 贴在父盒子右下角 */
}

典型场景：弹窗、轮播按钮、卡片右上角标签
4. fixed 固定定位（浏览器视口为参照物）
核心特点
1.脱离标准流
2.参照物：浏览器可视窗口（视口），页面滚动时位置保持不动
3.不受父级定位影响，永远固定在屏幕上
css
.back-top {
position: fixed;
right: 30px;
bottom: 50px; /* 永远贴在屏幕右下角，滚动页面不移动 */
}

典型场景：回到顶部按钮、侧边悬浮栏、底部导航栏
5. sticky 粘性定位（relative + fixed 结合体）
核心特点
1.滚动前：表现像 relative，跟随页面滚动
2.滚动到阈值（top/left 设定距离）：切换为 fixed，固定在屏幕边缘
3.参照物：父容器，父容器滚出屏幕时，元素跟着消失
css
.nav {
position: sticky;
top: 0; /* 距离顶部0px时粘住不动 */
}

典型场景：顶部导航栏、表格表头固定
三、定位参照物速记表
表格
定位值 参照物 是否脱离标准流 滚动页面是否移动
static 标准流 否 跟随滚动
relative 自身原始位置 否（占位保留） 跟随滚动
absolute 最近非 static 父级 /html 是（不占位） 跟随页面滚动
fixed 浏览器视口 是（不占位） 固定不动
sticky 父容器 + 视口 半脱离 到达阈值后固定
四、z-index 层级规则
1.只有开启定位（非 static）的元素才能设置 z-index
2.数值越大越在上层：z-index:999 > z-index:10
3.父子层级限制：父元素 z-index 再高，也盖不住 z-index 更高的子元素
4.同级元素：后写的 DOM 默认层级更高，会覆盖前面的元素
示例：弹窗遮罩层
css
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 998;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
z-index: 999; /* 弹窗在遮罩上方 */
}

五、高频配套实战用法

1. 水平垂直居中（absolute + margin）
   父盒子加 position:relative
   css
   .child {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   width: 200px;
   height: 200px;
   }

2. 水平垂直居中（absolute + transform，不定宽高推荐）
   css
   .child {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   }

3. 卡片右上角小红标
   css
   .card {
   position: relative;
   width: 300px;
   height: 300px;
   }
   .tag {
   position: absolute;
   top: -8px;
   right: -8px;
   width: 20px;
   height: 20px;
   background: red;
   border-radius: 50%;
   }

六、定位与浮动核心区别
1.浮动：用于横向并排布局（导航、商品列表），只能左右飘，受文档流宽度限制；需要清除浮动解决高度塌陷。
2.定位：用于自由拖拽布局（悬浮按钮、弹窗、标签），可上下左右任意偏移，不受一行宽度限制；无需清除浮动，靠 z-index 控制遮挡。