一文搞懂css定位布局，轻松掌握布局核心逻辑

前言

CSS布局文章前言初学前端做页面，谁没在CSS布局里栽过跟头？比起复杂的交互JS，布局排版才是最磨人的存在。精心排布好的页面模块，一改尺寸直接错乱偏移；想要元素居中对齐，试遍写法依旧歪歪扭扭；悬浮图标定不住位置，侧边栏适配频频翻车，明明样式代码无误，页面呈现却总不尽人意。层级混乱互相遮挡，弹性布局拿捏不准，小小样式问题反复调试半天，白白耗费大量时间精力。这篇文章摒弃枯燥生硬的理论讲解，用通俗直白的大白话拆解布局核心知识点，从标准文档流、浮动用法，到弹性布局、元素居中干货，再到层级重叠、适配踩坑要点一一讲透。零基础新手也能轻松吃透，不用死磕繁杂语法，轻松搞定居中布局、固定悬浮、多栏排版、页面适配等常用场景，彻底摆脱布局调试焦虑，轻松玩转CSS页面排版！

1. 文档流

页面布局默认是从上往下，从左往右的布局方式，呈现一种流式的排列，css中称这种流式排列为文档流

就如上述图片一样，元素会从上往下，从左往右按照自己尺寸"铺"在页面上，说起文档流，就不得不提css中元素的三大类型了

元素类型

1.块级元素

默认占据父容器的一整行，可以设置宽高，是最难"伺候"的一类元素，下面看一段css代码示例

css 复制代码

<style>
        *{
            margin: 0
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: rgb(247, 3, 44);
            /* display: inline; */
        }
        .box2{
            width: 200px;
            height: 100px;
            background-color: green;
            /* display: inline; */
        }
        a{
            width: 100px;
            height: 50px;
            background-color: #cbf803;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>

可以从运行结果看到，两个div元素都是块级元素，占据父容器body的一整行，可以设置宽高

2.行内块级元素

可以同一行排列，可以设置宽高下面给段示例

js 复制代码

.box1{
            width: 100px;
            height: 100px;
            background-color: rgb(247, 3, 44);
            display: inline-block;
        }
        .box2{
            width: 200px;
            height: 100px;
            background-color: green;
            display: inline-block;
        }

运行如下

将两个div元素设置成行内块级元素后，元素可以同一行排列，可以设置宽高

3.行内元素

可以同一行排列，不能设置宽高，是最"软弱"的一类元素，下面给段示例

js 复制代码

.box1{
            width: 100px;
            height: 100px;
            background-color: rgb(247, 3, 44);
            display: inline;
        }
        .box2{
            width: 200px;
            height: 100px;
            background-color: green;
            display: inline;
        }
        a{
            width: 100px;
            height: 50px;
            background-color: #cbf803;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <a href="https://www.baidu.com">百度以下</a>

运行结果如下

可以看到，被设置成行内元素的两个box元素"消失"了，那是因为行内元素不能设置宽高默认排列在0,0位置，排列在同一行

四大定位属性

1.position: relative; 相对定位

参考自己本身的文档流的位置来定位,原有的文档流位置还存在，不会脱离文档流，例如

js 复制代码

.box1{
            width: 100px;
            height: 100px;
            background-color: rgb(194, 6, 211);
           position: relative;
            left: 100px; 
            top: 50px;
        }
        .box2{
            display: inline;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2">hellow world</div>

运行结果

可以看到，box1设置成相对定位后，是根据原来位置向→偏离100px，向下50px，从而得到结果，但由于原来文档流还存在，导致添加的box2还是在原来box下面，而非左侧

2. position: absolute; 绝对定位

参考自己外层拥有定位属性的父容器来做参看，如果找不到，会以 body为标准. 绝对定位会导致容器脱离文档流，直接上代码

js 复制代码

.box1{
            width: 300px;
            height: 300px;
            border: 2px solid red;
            position: relative;
        }
        .wrap{
            /* width: 50px;
            height: 50px; */
            background-color: #e608fa;
            position: absolute;
            /* left: 125px;
            top: 125px; */
            left: 50%;
            top: 50%;
           transform: translate(-50%, -50%)/*绝对定位加平移*/
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="wrap">hello</div>
        <div class="name">张三</div>

结果如下

可以看到，body的子容器wrap设置了绝对定位，从而实现了居中效果，设置绝对定位的元素会完全脱离标准文档流，不再占用原有的页面空间，后续元素会自动填补其位置。所以name元素直接填补了左上角位置。

3. position: fixed; 固定定位：

参考浏览器可视区域窗口的位置来定位，不会脱离文档流，但是会阻塞其他元素的点击事件

js 复制代码

body{
            height: 2000px;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: #f90303;
            position: fixed;
            bottom: 10px;
            right: 10px;
           
        }
    </style>

4. position: sticky;粘性定位：

以浏览器可视区域为参考标准来定位，当滚动到指定位置时，元素会固定在指定位置，不会脱离文档流

补充

层级： z-index
z-index 是 CSS 中用于控制元素堆叠顺序的属性。它决定了当元素重叠时，哪个元素显示在前面，哪个显示在后面。

核心原理

1.z-index 只对定位元素（即 position 属性值为 relative 、 absolute 、 fixed 或 sticky 的元素）生效。 2.z-index属性值为可正可负的数字，数值越大层级越高，且仅在同级兄弟元素间对比生效，