一期带你搞懂css的定位布局

在了解 css 布局之前，我们要先了解 css 布局基础：文档流。

文档流

1.什么是文档流？

• 页面布局默认从上往下，从左往右的排列，呈现一种流式的排列
• 文档流是 css 布局的基础

2.三种元素类型

元素类型	特点	示例
块级元素	独占一行，可设置宽高	div，p, h1-h6
行内块级	同行排列，可设置宽高	input, button, img
行内元素	同行排列，不可设置宽高	span, a, strong

3. display 属性

• display：block —— 块级元素
• display：inline ——行内元素
• display: inline-block ——行内块级

position 定位属性

1. relative（相对定位）

• 参考自己原本的文档流位置
• 不脱离文档流，原有位置保留
• 使用场景：微调元素位置、作为绝对定位的参考父元素

2. absolute（绝对定位）

• 查找外层拥有定位属性的父容器
• 找不到则以 body 为参考
• 脱离文档流，不占原有空间
• 使用场景：弹出层、跟随元素、固定角落

3.fixed（固定定位）

• 以浏览器可视区域为参考
• 脱离文档流
• 页面滚动时位置不变
• 使用场景：固定导航栏、回到顶部按钮

4.sticky（粘性定位）

• 以浏览器可视区域为参考
• 滚动到阈值前表现为 relative，超出后表现为 fixed
• 使用场景：吸顶导航、分组标题

z-index 层级控制

1.层级要生效，必须要配合定位属性
2.只能在兄弟元素之间相比较，默认层级为 0

定位布局

1.水平垂直居中

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

2.固定导航栏

.navbar{
    position: fixed;
    top: 0;
    width: 100%;
}

3.粘性吸顶效果

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

4.悬浮卡片

.card{
    position: absolute;
    top: 100%;
    left: 0;
}

总结

CSS 定位布局是控制元素位置的核心技术，理解文档流和四种定位方式的区别，掌握 z-index 层级控制，就能灵活实现各种复杂的布局效果。