5. 布局：display 与定位

这是什么：display 与 position = 决定元素怎么排布的两个属性，前者改元素类型，后者定它钉在页面的哪个位置。

为什么用：浏览器默认按「文档流」从上往下排块级元素、从左往右排行内元素。想改排布，只能从 display 和 position 这两件兵器下手。

如何用：先把 span 转成 display: block 看它换行，再用 position: absolute 定住一个角。

5.1 块级、行内、行内块

类型	独占一行？	能设宽高？	常见元素
块级 block	是	能	`div`、`p`、`h1`
行内 inline	否	不能设	`span`、`a`、`strong`
行内块 inline-block	否	能	默认是 `img`、`input`

display 可自由转换：

span { display: block; }       /* 行内 → 块级，会换行 */
div  { display: inline-block; }/* 块级 → 行内块，可并排又可设宽高 */
.menu-link { display: inline-block; padding: 6px 12px; } /* 链接变按钮 */

你会看到：<a> 本来不能设 padding 高度，转成 inline-block 后就成了一个「按钮」。

5.2 display 的常规取值

值	效果
`block`	独占一块
`inline`	行内拼接
`inline-block`	行内拼接且可设宽高
`none`	隐藏且不再占位（vs `visibility: hidden` 占位但看不见）

5.3 position 定位

取值	参照物	常见用途
`static`（默认）	不参与定位	正常文档流
`relative`	自己原本的位置	微调，或当子元素定位的参照
`absolute`	最近有定位的祖先	悬浮角标、卡片角标
`fixed`	浏览器窗口	回到顶部按钮、固定导航
`sticky`	在容器内粘住	表头、侧栏跟随滚动

.parent { position: relative; }   /* 当参照物 */
.badge  {
  position: absolute;
  top: -6px;
  right: -6px;                    /* 钉在父盒右上角外 */
  background: tomato;             /* 尺寸由内容撑开 */
  border-radius: 50%;
}

你会看到：徽章脱出文档流，精确钉在卡片右上角。

组合套路：父元素 relative + 子元素 absolute，是「自由摆件」的唯一标准用法。

5.4 层叠顺序 z-index

定位过的元素可以叠起来，z-index 决定谁在上：

.modal { position: fixed; z-index: 999; } /* 弹窗最高层 */

口诀：z-index 越大越靠前；没定位的元素不参与比较。

5.5 动手改

把导航链接设成 inline-block，加 padding 做成导航按钮
用 absolute 做一个「新」字角标
制作一个 position: fixed 的返回顶部按钮

5.6 小结

三类盒子：block / inline / inline-block，可用 display 转换
定位五取值，常用组合是「父 relative + 子 absolute」
fixed 面向窗口，sticky 用于吸顶

下一章：Flex 弹性布局 🐸