CSS定位布局和网格布局

定位布局：精确控制元素的位置。
网格布局：用于构建二维页面结构（行 + 列）。

一、CSS 定位布局（Positioning）

1. position 属性概述

position 决定元素如何定位。

css 复制代码

position: static | relative | absolute | fixed | sticky;

值	含义
static	默认定位（不定位）
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘性定位

2. static（默认定位）

css 复制代码

div {
    position: static;
}

特点：

默认值
按正常文档流排列
top/right/bottom/left 无效

3. relative（相对定位）

元素相对于自己原来的位置移动。

css 复制代码

.box {
    position: relative;
    left: 50px;
    top: 20px;
}

效果

向右移动 50px
向下移动 20px
原来的空间仍然保留

图示

原位置：

text 复制代码

[A][B][C]

B 设置：

css 复制代码

position: relative;
left: 20px;

结果：

text 复制代码

[A][   ][C]
      B

4. absolute（绝对定位）

元素脱离文档流，相对于最近的已定位祖先定位。

css 复制代码

.child {
    position: absolute;
    top: 0;
    right: 0;
}

示例

html 复制代码

<div class="parent">
    <div class="child"></div>
</div>

css 复制代码

.parent {
    position: relative;
    width: 300px;
    height: 200px;
}

.child {
    position: absolute;
    top: 10px;
    left: 20px;
}

特点

脱离文档流
不占原空间
可以叠加

5. fixed（固定定位）

相对于浏览器窗口定位。

css 复制代码

.nav {
    position: fixed;
    top: 0;
    left: 0;
}

特点

页面滚动时位置不变
常用于导航栏、返回顶部按钮

6. sticky（粘性定位）

滚动到指定位置时固定。

css 复制代码

.header {
    position: sticky;
    top: 0;
}

特点

开始像 relative
到达 top:0 后变成 fixed

7. top / right / bottom / left

css 复制代码

position: absolute;
top: 10px;
left: 20px;

属性	含义
top	距顶部
right	距右侧
bottom	距底部
left	距左侧

8. z-index（层级）

控制元素上下叠放顺序。

css 复制代码

.box1 {
    z-index: 10;
}
.box2 {
    z-index: 1;
}

数字越大，越靠上。

9. 定位总结表

定位	是否脱离文档流	参考对象
static	否	无
relative	否	自己原位置
absolute	是	最近定位祖先
fixed	是	浏览器窗口
sticky	半脱离	滚动区域

二、CSS Grid 网格布局

1. Grid 是什么？

Grid 是二维布局系统：

行（rows）
列（columns）

非常适合：

页面整体布局
图片墙
仪表盘

2. 开启 Grid

css 复制代码

.container {
    display: grid;
}

3. 定义列

css 复制代码

.container {
    display: grid;
    grid-template-columns: 100px 200px 100px;
}

表示：

第一列 100px
第二列 200px
第三列 100px

4. fr 单位

fr = 剩余空间比例。

css 复制代码

grid-template-columns: 1fr 2fr 1fr;

若剩余空间为 400px：

第一列 100px
第二列 200px
第三列 100px

5. 定义行

css 复制代码

grid-template-rows: 100px 200px;

6. gap（间距）

css 复制代码

gap: 20px;

等价于：

css 复制代码

row-gap: 20px;
column-gap: 20px;

7. 完整示例

css 复制代码

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    gap: 10px;
}

形成：

text 复制代码

┌────┬────┬────┐
│ 1  │ 2  │ 3  │
├────┼────┼────┤
│ 4  │ 5  │ 6  │
└────┴────┴────┘

8. 指定项目位置

css 复制代码

.item1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

表示：

从第 1 条列线到第 3 条列线
横跨两列

9. span 关键字

css 复制代码

.item {
    grid-column: span 2;
}

占 2 列。

10. repeat() 函数

css 复制代码

grid-template-columns: repeat(4, 1fr);

等价于：

css 复制代码

1fr 1fr 1fr 1fr

11. minmax()

css 复制代码

grid-template-columns: repeat(3, minmax(100px, 1fr));

每列：

最小 100px
最大可伸缩

12. 自动填充（响应式）

css 复制代码

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

非常适合：

图片列表
卡片布局

13. justify-items 与 align-items

控制单元格内元素对齐。

css 复制代码

justify-items: center;
align-items: center;

属性	方向
justify-items	水平方向
align-items	垂直方向

14. justify-content 与 align-content

控制整个网格在容器中的对齐。

15. grid-template-areas

css 复制代码

.container {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
}

css 复制代码

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

页面结构图

text 复制代码

┌─────────────────────┐
│       header        │
├──────────┬──────────┤
│ sidebar  │   main   │
├─────────────────────┤
│       footer        │
└─────────────────────┘

三、完整 Grid 页面示例

html 复制代码

<div class="container">
    <header>Header</header>
    <aside>Sidebar</aside>
    <main>Main</main>
    <footer>Footer</footer>
</div>

css 复制代码

.container {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 80px 1fr 60px;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    height: 100vh;
}

header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }

四、Position 与 Grid 的区别

特性	Position	Grid
用途	精确定位单个元素	构建整体布局
是否二维	否	是
是否响应式	一般	非常强
是否脱离文档流	部分会	不会

五、实际应用场景

Position 适合

弹窗
返回顶部按钮
徽章角标
固定导航栏

Grid 适合

整体网页布局
图片墙
卡片列表
后台管理系统

六、总结

Position

用于"把某个元素放到指定位置"。

Grid

用于"把整个页面划分成行和列"。

七、最常用模板

固定导航栏

css 复制代码

nav {
    position: fixed;
    top: 0;
    width: 100%;
}

二列布局

css 复制代码

.container {
    display: grid;
    grid-template-columns: 200px 1fr;
}

自适应卡片

css 复制代码

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