萌新小白基础篇之CSS定位布局（干货满满）！

前言

是否还在为了页面的布局而感到烦恼呢？各种标签怎么固定在我们想要的位置呢？但是在学习CSS定位布局之前，我们应该先了解一下什么是文档流，让我们一起来看看吧！

一、文档流

文档流也叫标准流/普通流，是浏览器默认的元素排版规则，页面布局默认是从上往下，从左往右的排列，呈现一种流式的排列，往右为正，往下为正，那文档流包含几种元素呢？

1.1 块级元素

块级元素默认占据父容器的一整行，不能同行排列 ，从上到下依次排序，可以设置宽高，默认宽度撑满父容器，高度由内容决定。例如：div（区块）,p（段落），h1~h6（标题），table（表格）等等。

1.2 行内块级元素

行内块级元素不独占一行,可以同行排列 ，也可以设置宽高，宽度由内容决定，放不下就会自动换行。例如：img（图片），input（输入框），buttom（按钮），select（下拉选择）等等。

1.3 行内元素

行内元素可以同行排列 ，并且不可以设置宽高，内容多大占多大空间。例如：span（范围），b（加粗），i（斜体），u（下划线）等等。

单纯讲解概念肯定难以记忆，那我们一起来看一个例子吧。

css 复制代码

<body>
    <div class="box1"></div>  /*我们先在页面上放两个容器  box1 和 box2*/
    <div class="box2"></div>
</body>

再去给这两个盒子加一点样式

css 复制代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .box1{
        width: 100px;  /*设置宽100像素*/
        height: 100px; /*高100像素*/
        background-color: red; /*背景色为红色*/
       }
       .box2{
        width: 200px;  /*宽200像素*/
        height: 100px; /*高100像素*/
        background-color: green; /*背景色为绿色*/
       }
    </style>
</head>

那我来看看这两个盒子在页面上是什么效果

我们可以很清晰的看到，这两个盒子一个在上一个在下，这是因为 div 天生就是块级元素，它默认占据了父容器的一整行，所以绿盒子只能呆在它的下方，同时我们也可以看到，它们的离左边的顶点处都有一定的留白，这是因为body自带了样式，我们如果让它去除这一块留白，并且还能呆在同一行呢？我们可以这样操作。

css 复制代码

<style>
        *{                  /*我们给它写一个 *{ } ，代表了所有的标签 ,并在里面写入 margin: 0， 代表是把所有的标签的外边距都设置为0*/
            margin: 0;   
        }
       .box1{
        width: 100px;
        height: 100px;
        background-color: red;
        display: inline-block;  /*手动给它设置成行内块级元素*/
       }
       .box2{
        width: 200px;
        height: 100px;
        background-color: green;
        display: inline-block;  /*手动给它设置成行内块级元素*/
       }
    </style>

这样操作我们就可以看到两个盒子呆在了同一行并且没有留白，注意：一定要把两个盒子都设置为行内块级元素，如果只设置一个，那另一个也还是块级元素，依然要占据一行的位置，不信邪的宝子们可以去手动试试哦~

我们还想再加入一个行内元素，可以怎么操作呢？

css 复制代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
       .box1{
        width: 100px;
        height: 100px;
        background-color: red;
        display: inline-block;
       }
       .box2{
        width: 200px;
        height: 100px;
        background-color: green;
        display: inline-block;
       }
       a{
        width: 100px;   /*设置宽*/
        height: 100px;  /*设置高*/
        background-color: #fff;  /*设置背景色*/
       }
    </style> 
</head>
<body>
    <div class="box1"></div>  
    <div class="box2"></div>
    
    <a href="https://www.baidu.com.">百度一下</a>  //设置行内元素

我们可以看到行内元素即使设置了宽高，其大小还是内容本身的大小，因为它的特性是可以同行排列，但不能设置宽高，设置了也是无用的，详细讲解完元素流，接下来让我们看看什么叫CSS的定位布局吧！

二、定位布局

在网页开发中，CSS定位布局可以打破浏览器默认自上而下、自左向右的元素排列规则，自由控制元素在页面中的摆放位置，实现元素层叠、居中对齐、悬浮固定、精准偏移等各类复杂页面效果。那让我们来看看它最常用的四个定位属性。

2.1 相对定位（position:relative）

position:relative 相当于是给这个盒子打上一个可以移动的标签，并且参考自己本身的文档流位置来定位,原有的文档流位置不变，没有脱离文档流，具体移动还需要添加一些内容，如：

css 复制代码

.box{
   width: 100px;
   height: 100px;
   background-color: #e237cb; /*背景色为紫色*/
   position: relative;  /*可移动标签*/
   left: 100px;  /*右移100像素*/
   top: 50px;   /*下移100像素*/
}

那我们可以看到这个紫色盒子的移动

2.2 绝对定位（position：absolute）

position:absolute 也是给这个盒子打上一个可以移动的标签，但是它是找自己的外层拥有定位属性的父容器来做参考，如果找不到，会以body 为标准，绝对定位会导致容器脱离文档流，也就是说当容器带有绝对定位的标签时，它原有空间就会被下一个元素顶替，而它本身相当于跳出了这个文档流，不在五界之中了。

css 复制代码

 <style>
   .box{
      width: 200px; /*总宽200px*/
      height: 200px;
      /*position: absolute;*/
  }
  .wrap{
      width: 50px;
      height: 50px;
      background-color: #dd38c1;
      position: absolute;  /*绝对定位*/
      left:200px;   /*右移200px*/        
  }
    </style>
    
  <body>
    <div class="box">/*父容器*/
        <div class="wrap"></div>/*子容器*/
    </div>
</body>

我们可以很清晰的看到，紫色容器并不是紧紧靠在大容器的边框，这是因为父容器没有带定位属性，所以它会以body为标准来移动。

当我们给box加上定位属性 position: absolute （把注释取消隐藏）则会有

2.3 固定定位（position:fixed)

position:fixed ：以浏览器可视区域为参考标准来定位,不随页面的滚动而移动，如果我们想在右下角固定一个盒子，可以这样来操作。

css 复制代码

<style> /*在style里面加上属性*/
  body{
    height: 3000px; /*高3000px，方便滑动看是否盒子固定*/
  }
  .box{
    width: 100px;
    height: 100px;
    background-color: red;
    position: fixed;  /*固定定位*/
    bottom: 10px;  
    right: 10px;
  }
    </style>
    
 <body>
    <div class="box"></div>
    <h2>hello</h2>/*hello标题用于对比*/
</body>

移动滑杆直至看不到hello→

我们可以看到，手动移滑杆直至看不到hello时，红色盒子依旧固定在屏幕下方

2.4 粘性定位（position:sticky）

position:sticky ：依旧以浏览器可视区域为参考标志来定位，可以看作是相对定位（position:releaive）与固定定位（position:fixed）的结合，移动到阙值后"粘住"不移动。来看一个例子

css 复制代码

<style>
  body{
    height: 200vh; /*整个页面高为屏幕的2倍*/
  } 
  .box{
    width: 500px;
    height: 500px;
    background-color: rgba(216, 65, 65, 0.531);
    position: relative;  /*相对定位*/
  }
            
  .box2{
    height: 100px;
    background-color: #16cddacb;
    position: sticky; /*粘性定位*/
    top:0; /*黏住顶部，一直在顶部上端*/
  }
  .wrap{
    width: 50px;
    height: 50px;
    background-color: #8f21cf;
    position: sticky;/*粘性定位*/
    top:0; /*黏住顶部*/     
  }
  </style>
    
  <body>
    <div class="box"> /*父容器*/
        <div class="wrap"></div>/*子容器*/
    </div>
    <div class="box2"></div>
</body>

开始移动，紫色方块一直在→

→当移动到下方时，蓝色容器依旧吸附在顶部

那为什么紫色盒子被蓝色给覆盖掉了呢？这又涉及到了一个层级的概念 z-inde（层级），当多个元素重叠在一起，那谁覆盖谁就要看它的层级是多少了。

三、层级（z-index)

当元素都是同等地位，如：都是父容器或都是子容器，谁在上谁在下就由层级来决定，而每个容器默认层级都是0，那就后写的容器覆盖前面，但我们想让前面的漏出来呢？那就修改它的层级，让我们来看一个例子。

css 复制代码

<style>
  .box{
     position:relative;
     z-index:10;  /*修改层级为10*/
}

  .box2{
     position:relative;
     z-index:1;  /*修改层级为1*/
 }
 </style>

这样 box就会在box2的上方，但是z-index有两个需要特别注意的坑！

（如有补充，请大佬指点）

萌新小白基础篇之CSS定位布局（干货满满）！

前言

一、文档流

1.1 块级元素

1.2 行内块级元素

1.3 行内元素

二、定位布局

2.1 相对定位 （position:relative）

2.2 绝对定位（position：absolute）

2.3 固定定位（position:fixed)

2.4 粘性定位（position:sticky）

三、层级（z-index)

2.1 相对定位（position:relative）