定位与布局：把 div 当乐高，拼出九宫格还是巴黎铁塔随你

11-25 103 0 0

【总览】

阅读提示：800 字左右，带薪等地铁刚好；学不会你来打我，我刷卡进站了。

一、先放一张灵魂对比图

不会定位	会定位
关闭按钮跟着正文一起滚走	关闭按钮钉在右上角，像牛皮藓广告
弹窗居中靠手动空格	弹窗永远居中，连折叠屏都服帖
底部版权被内容挤到月球	版权贴着地板，高冷且不动摇

结论：定位 = 把 div 从“文档流”里拎出来，想放哪放哪，像把 Lego 小人从说明书里放生。

二、position 五兄弟，一张表看清

值	是否脱流*	参考谁	典型场景	吐槽
`static`	❌	谁都不参考，老实排班	默认值，没人用它炫技	就像路人甲，没有镜头
`relative`	❌	自己原来的位置	微调皮一下，留个占位符	好伙伴，不脱流所以不坑队友
`absolute`	✅	最近已定位的祖先	右上角 badge、小三角	没祖先 = 找 body，直接跑飞
`fixed`	✅	视口（浏览器窗口）	置顶导航、回到顶部	移动端键盘抬起时可能抽风
`sticky`	❌→✅	视口顶部/左侧	表头、侧边栏筛选	-relative 和 -fixed 的私生子，兼容性看天吃饭

*脱流 = 脱离文档流，后面元素会当它不存在。

三、relative & absolute：黄金搭档

HTML：

<div class="card">
  限时优惠
  <span class="tag">Hot</span>
</div>

CSS：

.card {
  position: relative;   /* 给 absolute 当锚点 */
}
.tag {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(30%, -30%);  /* 再往外飞一点 */
  background: #f43f5e;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

口诀：
“父相子绝” —— 父亲 relative，孩子 absolute，top/left 说多少就多少，不会满屏乱窜。

四、fixed：做一条“粘人”的导航

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 56px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  z-index: 1000;   /* 保证飘在最高层 */
}

坑点提醒：

fixed 元素会占用视口高度，后面内容可能被盖住。
解决方案：给 body 加 padding-top: 56px（刚好是导航高度），就像给页面戴了顶安全帽。

五、sticky：relative 与 fixed 的“混血王子”

需求：滑动到顶部时，筛选条自动吸顶；滑回去又恢复原位。

.filter {
  position: sticky;
  top: 56px;      /* 吸在导航下方 */
  background: #f8fafc;
  padding: 12px;
  border-bottom: 1px solid #e5e7eb;
}

一句话解释：
“先随大部队 scroll，到指定位置就地转业，变成 fixed。”
兼容性：现代浏览器 OK，IE 直接罢工（IE：我退休了别 cue）。

六、flex 布局：九宫格、水平垂直居中一把梭

HTML：

<div class="flex-box">
  <div>1</div> <div>2</div> <div>3</div>
  <div>4</div> <div>5</div> <div>6</div>
  <div>7</div> <div>8</div> <div>9</div>
</div>

CSS：

.flex-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;          /* 自动缝隙，告别 margin 狂算 */
}
.flex-box > div {
  flex: 1 1 calc(33.333% - 10px);
  aspect-ratio: 1;    /* 正方形，一行仨 */
  display: grid;
  place-items: center;
  background: #a3b18a;
  color: #fff;
  border-radius: 8px;
}

亮点：

gap 代替 margin，数学不好也能对齐；
aspect-ratio: 1 直接锁死正方形，再也不用 padding-bottom 百分比；
place-items: center 一行搞定垂直 + 水平居中，比写 top: 50% 再 translate(-50%,-50%) 爽 10 倍。

七、grid 布局：两列自适应卡片，一行代码

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

解释：

auto-fit：能放多少列就放多少；
minmax(280px, 1fr)：每列最小 280px，最大平分剩余空间；
效果：从 27 寸大屏到手机，卡片自动换行，永远撑满且不爆炸。

八、祖传避坑指南

坑	症状	急救
`z-index` 9999 仍被盖住	父层建立了新的堆叠上下文*	检查父层是否 `transform/opacity/flex` 等，必要时把弹窗移到 body 下
`position: absolute` 飞屏外	没找到已定位祖先	给最近父级加 `position: relative`
`sticky` 粘了寂寞	父元素 `overflow: hidden`	把 overflow 去掉或换 fixed
移动端 fixed 输入框错位	键盘抬起视口变化	改 sticky 或用 JS 动态算高度

*堆叠上下文：浏览器把页面切成多层玻璃，z-index 只对同一层有效，父层低，孩子再高也出不去。

九、课后作业：做一个“回到顶部”按钮

需求：

默认透明，向下滚动 300px 后淡入；
点击平滑回顶部；
使用 fixed 定位在右下角 bottom: 24px; right: 24px；
纯 CSS + 一行 JS（可选）。

提示：

#goTop {
  position: fixed;
  bottom: 24px;
  right: 24px;
  opacity: 0;
  transition: opacity .3s;
}
#goTop.show { opacity: 1; }

CodePen 或截图甩评论区，最简洁实现送“CSS 飞行执照”贴纸电子版一张，打印贴电脑，Bug 率-50%。

十、下集预告

定位布局会了，但老板又拍桌子：
“按钮干巴巴，用户不想点！给它整点动效！”
下一篇《动画：让按钮像猫咪一样会摇尾巴》，
带你玩转 transition & animation，用 3 行代码让页面活过来。
别走开，系列文持续连载，关注等更！

（完）

快来点个赞吧

编程知识