2.绝对布局位置：absolute；脱离文档流。它指的是它最近的父定位元素，或者body如果它的父元素都不是定位元素。（一般情况下，绝对定位元素是嵌套在相对定位元素的内容中使用的）案例：我们把上面代码中设置相对定位的代码改成绝对定位。将紫色div设置为绝对定位后，发现蓝色div不见了。其实蓝色的div并没有丢失，而是和紫色的div重叠了。因为当紫色div设置为绝对定位时，会脱离文档流布局。这时候就相当于漂浮了，蓝色div自然会和紫色div重叠，因为没有紫色div的挤压。一起。接下来，让我们为紫色的div设置一个偏移量。此时，我们发现紫色的div出现在了父元素之外，在页面的左上角。这是因为它的父元素中没有定位元素，所以它的偏移量是相对于body调整的。接下来，我们将其父元素设置为相对定位，看看会发生什么？这时候我们看到紫色的div回到了它的父元素。3、固定布局位置：固定；脱离文档流。它是相对于浏览器窗口定位的，相当于把这个元素钉在了浏览器窗口上，无论我们如何操作滚动条，它的位置都无法改变。我们继续沿用上面的代码，将紫色div中的绝对布局改为固定布局，并将其父元素的高度调大一些。从上面的GIF中我们可以看到，无论我们如何操作滚动条，紫色的div在整个浏览器页面中都处于一个固定的位置。这种类型的定位最适合广告展示位置。4.置顶布局位置：置顶；未达到阈值时，不离开文档流（相对），达到阈值时，离开文档流（固定）。阈值可以设置为左、上、右、下。了解了上面的布局之后，我们再来看看什么是粘性布局。将一个定位元素设置为粘性布局后，当我们没有达到设定的阈值时，它就会显示在它应该出现的位置，就像正常的文档流一样。一旦我们达到它设置的阈值，它就会一直停留在我们设置的位置。效果图如下：css代码如下：.two{width:100%;高度：100px；背景色：浅珊瑚色；定位：粘性；/*设置为粘性定位*/top:0;/*当元素到达整个页面距离顶部0px时，会停留在这个位置*/}定位元素层级z-index定位元素悬浮在正常文档流之上，我们可以设置层级通过z-index属性的元素。什么场景下会用到z-index属性呢？比如我们做一个让用户输入登录信息的弹框，我们希望当用户点击登录的时候，弹框不会被其他任何元素覆盖。我们可以设置它的z-index属性，让它的级别设置为最高级别。以下案例将帮助我们学习和理解z-index属性。代码如下：