16. Display 与定位

本节目标：掌握 display 和 position 相关的工具类，能实现常见的布局定位需求。

Tailwind 把 CSS 的 display 和 position 属性都做成了工具类，直接在 HTML 里用。

Display 控制元素显示类型

block — 块级元素

<div class="block">独占一行，可设置宽高</div>

display: block。元素占据一整行，宽度默认 100%，可以设置 width/height。

inline — 行内元素

<span class="inline">不换行，宽高设置无效</span>

display: inline。多个元素排在同一行，设置 width/height 无效，上下 margin 也无效。

inline-block — 行内块

<span class="inline-block w-20 h-20 bg-blue-500">可设宽高，不换行</span>

display: inline-block。结合两者优点：可以设宽高，又能在同一行排列。

flex — 弹性布局

<div class="flex">
  <div>子项 1</div>
  <div>子项 2</div>
</div>

display: flex。一维布局神器，第 17 章会详细讲。

inline-flex

<div class="inline-flex">flex 容器本身不独占一行</div>

跟 flex 一样，但容器自身表现为行内元素。

grid — 网格布局

<div class="grid grid-cols-3 gap-4">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>

display: grid。二维布局，第 19 章展开。

inline-grid

跟 grid 类似，容器自身表现为行内。

<div class="contents">
  <div>子元素直接参与父级布局</div>
</div>

display: contents。元素自身不生成盒子，子元素直接参与上层布局。适合把一组元素”透传”到 flex/grid 容器里。

hidden — 隐藏元素

<div class="hidden">完全隐藏，不占空间</div>

display: none。元素消失，不占据任何空间。

其他 display 值

类名	CSS 值
`table`	`display: table`
`table-cell`	`display: table-cell`
`table-row`	`display: table-row`
`list-item`	`display: list-item`
`flow-root`	`display: flow-root`

Visibility — 隐藏但占位

跟 hidden 不同，invisible 只是看不见，空间还留着：

<div class="invisible">看不见，但占着位置</div>
<div class="visible">默认，正常显示</div>

类名	效果
`visible`	可见（默认）
`invisible`	不可见，保留空间
`hidden`	不可见，不保留空间

什么时候用 invisible？需要保持布局稳定的时候。比如表单验证错误信息：用 hidden 会让其他元素跳过去，用 invisible 位置不变。

Position 定位

static — 默认定位

<div class="static">正常文档流</div>

position: static。所有元素的默认值，top/right/bottom/left 对它无效。

relative — 相对定位

<div class="relative top-4 left-4">相对自己原位置偏移</div>

position: relative。相对于自己本来的位置偏移，原位置保留（其他元素当它还在那里）。

absolute — 绝对定位

<div class="relative">
  <div class="absolute top-0 right-0">右上角</div>
</div>

position: absolute。相对于最近的非 static 祖先定位，脱离文档流（不占空间）。

关键点：父元素必须是非 static（通常是 relative），否则会一直往上找，最终相对于 <body>。

fixed — 固定定位

<div class="fixed bottom-4 right-4">悬浮按钮</div>

position: fixed。相对于**视口（浏览器窗口）**定位，滚动页面时位置不变。常用于悬浮按钮、固定导航栏。

sticky — 粘性定位

<div class="sticky top-0">滚动到顶部时粘住</div>

position: sticky。在正常文档流里，但当滚动到指定位置（如 top: 0）时会”粘”在那里。常用于表格标题、侧边栏。

Note

sticky 有作用域限制——它只在父容器内有效。如果父容器滚出视野，sticky 元素也会跟着出去。

Top / Right / Bottom / Left — 偏移值

配合 position 使用，控制元素的具体位置：

<div class="absolute inset-0">铺满父元素</div>
<div class="absolute top-0 left-0">左上角</div>
<div class="absolute bottom-4 right-4">右下角，离边 1rem</div>

inset 简写

<!-- 四个方向都是 1rem -->
<div class="absolute inset-4">

<!-- 水平方向 1rem，垂直方向 2rem -->
<div class="absolute inset-x-4 inset-y-8">

<!-- 全方向 0，常用于遮罩层 -->
<div class="absolute inset-0 bg-black/50">

可用的数值：0、1、2、4、8、16… 以及分数值 1/2、1/3、2/3、1/4 等。

任意值

<div class="absolute left-[137px] top-[53px]">
<div class="absolute inset-[10px_20px_30px_40px]">

方括号里随便写 CSS 值。

负值

<div class="absolute -top-4 -left-4">往外偏移</div>

负值可以让元素往外溢出，用于特殊效果（比如超出卡片边界的角标）。

Z-Index — 堆叠顺序

控制谁在上面谁在下面：

<div class="relative z-10">在上层</div>
<div class="relative z-0">在下层</div>
<div class="relative -z-10">在默认内容之下</div>

类名	值
`z-0`	`z-index: 0`
`z-10`	`z-index: 10`
`z-20`	`z-index: 20`
`z-30`	`z-index: 30`
`z-40`	`z-index: 40`
`z-50`	`z-index: 50`
`z-auto`	`z-index: auto`

常用场景：

模态框：z-50
遮罩层：z-40
固定导航：z-30
下拉菜单：z-20

Tip

z-index 只对 position 非 static 的元素有效。如果你设了 z-index 但没反应，检查是不是忘了加 relative/absolute/fixed。

Overflow — 内容溢出处理

<div class="overflow-hidden">溢出部分裁掉</div>
<div class="overflow-auto">需要时显示滚动条</div>
<div class="overflow-scroll">始终显示滚动条</div>
<div class="overflow-visible">默认，溢出可见</div>

可以分开控制水平和垂直：

<div class="overflow-x-auto overflow-y-hidden">
  水平方向溢出滚动，垂直方向裁掉
</div>

常见用途：

表格在小屏幕上：overflow-x-auto
聊天窗口：overflow-y-auto
裁剪圆形头像：overflow-hidden + rounded-full

下一章我们进入 Flexbox 和 Grid，这才是布局的主力。