目录1.Static2.Absolute3.Relative4.Fixed5.Sticky6.Z-index最近发现不自己把这些基础知识理一遍还是会乱所以在这里结合最近做的几个作业把我理解的五个定位给写了一下我们的定位position不亚于这五个Static, Relative, Absolute, Fixed, Sticky熟练掌握这五种布局便可实现如下图的布局1.Static静态定位默认值默认的布局方式正常的文档流。2.Absolute绝对定位先把元素移出正常的文档流也就是说原本在他后边的元素会自动挤占他原本的空间他自己呢就覆盖在挤占其空间的元素的上方。这时候其实就相当于告诉页面我的位置就死在这里了不管前面后面怎么变化我都在这里因为我都移出文档流了自然就不会受到其他东西的影响。可以用leftrighttopbottom属性来设置位置偏移设置这些属性是相对于包含他的元素说简单点这里不说那么严谨就是父级盒子中位置确定了如设置了position的元素static除外的元素他就相对于这个元素偏移。3.Relative他的主要作用是偏移就是上文说的可以用leftrighttopbottom属性来设置位置偏移区别就是他还是属于正常文档流的其他元素不会挤占他原本的空间。他的使用往往需要Absolute我就死在这里了说明位置已经唯一确定的配合relative会相对于他的父级中已经确认了位置的元素进行偏移我的理解是Absolute的配合相当于把两个盒子给绑定在了一起比如我现在使用了input大家都知道默认的input样式很丑所以一般我们会使用label元素可以扩大用户点击范围去自定义这个样式首先我们需要清楚input的样式你可以让他display为none或者把他缩成一个小点然后透明化。.checkbox{/* 变成一个小点然后透明化 */ height: 0; width: 0; opacity: 0; cursor: pointer; }接着我想通过偏移把红色小方框定位在那个地方我们肉眼看过去他就是相对于绿色的大方块定位的嘛所以我们将绿色的position设置为absolute红色设置为relative就可以相对于绿色的大方块进行偏移。这个的优点就是当我们移动绿色方块时红色方块跟着动而不是停在原地。4.Fixed固定定位用leftrighttopbottom属性来设置位置偏移无论页面怎么滚动他都会固定在那个位置不动!(垃圾广告这个是最帅的就是要挡在那里)他的宽高为内容的宽高可以通过设置left0right0宽度占满top0bottom0高度占满所在空间5.Sticky在浏览器的一定位置时直接固定在页面比如我们最常见的导航栏用leftrighttopbottom属性来设置当位置达到多少时进行固定当然我们有时候会遇到这种尴尬的情况如图上面的导航栏压住了下面的内容其实这个是上面几个的知识这里因为导航栏设置了Sticky脱离了正常的文档流所以下面的内容栏就补充了他的空位这里呢我们可以通过内容栏的top来设置也可以通过#item{ scroll-margin-top: 120px;通过这个来设置亦可 }6.Z-index如果两个absolute的元素重合在一起一般默认后定义的在先定义上面当然也看其 Z-indexZ轴方向的偏移值离人眼的距离大小大的在上面离人眼越近小的在下面可以是负数比较的时候如果父级也有Z-index比较父级本文参考了第一版b站视频动画解释CSS定位布局-Static, Relative, Absolute, Fixed, Sticky, 五大定位模式实现自由布局_哔哩哔哩_bilibili