CSS定位布局-五个定位实现自由布局（Static, Relative, Absolute, Fixed, Sticky）

        

目录

1.Static

2.Absolute

3.Relative

4.Fixed

5.Sticky

6.Z-index

---

        最近发现不自己把这些基础知识理一遍还是会乱，所以在这里结合最近做的几个作业，把我理解的五个定位给写了一下：

        我们的定位（position）不亚于这五个：Static, Relative, Absolute, Fixed, Sticky，熟练掌握这五种布局便可实现如下图的布局：

1.Static

        静态定位，默认值，默认的布局方式，正常的文档流。

2.Absolute

        绝对定位，先把元素移出正常的文档流（也就是说原本在他后边的元素会自动挤占他原本的空间），他自己呢就覆盖在挤占其空间的元素的上方。这时候其实就相当于告诉页面我的位置就死在这里了，不管前面后面怎么变化，我都在这里，因为我都移出文档流了，自然就不会受到其他东西的影响。

        可以用left，right，top，bottom属性来设置位置偏移，设置这些属性是相对于包含他的元素，说简单点（这里不说那么严谨），就是父级盒子中位置确定了（如设置了position的元素，static除外）的元素，他就相对于这个元素偏移。

3.Relative

        他的主要作用是偏移，就是上文说的可以用left，right，top，bottom属性来设置位置偏移，区别就是他还是属于正常文档流的，其他元素不会挤占他原本的空间。他的使用往往需要Absolute（我就死在这里了，说明位置已经唯一确定）的配合，relative会相对于他的父级中已经确认了位置的元素进行偏移，我的理解是Absolute的配合相当于把两个盒子给绑定在了一起

        比如我现在使用了input，大家都知道默认的input样式很丑，所以一般我们会使用label元素（可以扩大用户点击范围）去自定义这个样式，首先我们需要清楚input的样式，你可以让他display为none，或者把他缩成一个小点，然后透明化。

.checkbox{/* 变成一个小点然后透明化 */
  height: 0;
  width: 0;
  opacity: 0;
  cursor: pointer;
}

        接着我想通过偏移把红色小方框定位在那个地方，我们肉眼看过去，他就是相对于绿色的大方块定位的嘛，所以我们将绿色的position设置为absolute，红色设置为relative，就可以相对于绿色的大方块进行偏移。

        这个的优点就是当我们移动绿色方块时，红色方块跟着动而不是停在原地。

4.Fixed

        固定定位，用left，right，top，bottom属性来设置位置偏移，无论页面怎么滚动，他都会固定在那个位置不动!(垃圾广告这个是最帅的，就是要挡在那里)，他的宽高为内容的宽高，可以通过设置left：0，right：0（宽度占满）top：0，bottom：0（高度占满所在空间）

5.Sticky

        在浏览器的一定位置时，直接固定在页面，比如我们最常见的导航栏

        用left，right，top，bottom属性来设置当位置达到多少时进行固定

        当然我们有时候会遇到这种尴尬的情况（如图），上面的导航栏压住了下面的内容

        其实这个是上面几个的知识，这里因为导航栏设置了Sticky，脱离了正常的文档流，所以下面的内容栏就补充了他的空位，这里呢我们可以通过内容栏的top来设置，也可以通过

#item{
  scroll-margin-top: 120px;（通过这个来设置亦可）
}

6.Z-index

        如果两个absolute的元素重合在一起，一般默认后定义的在先定义上面，当然也看其 Z-index（Z轴方向的偏移值，离人眼的距离）大小，大的在上面（离人眼越近），小的在下面（可以是负数，比较的时候如果父级也有Z-index，比较父级）

本文参考了

第一版：b站视频：动画解释CSS定位布局-Static, Relative, Absolute, Fixed, Sticky, 五大定位模式实现自由布局_哔哩哔哩_bilibili