css中相对定位脱离文档流吗

CSS中有着很多定位属性，其中相对定位是一种比较常见的方式。当我们为元素设置一个相对定位时，它是相对于自身原本所在的位置进行位移的。然而，相对定位有一个特性，那就是它会脱离文档流。

什么是文档流呢？它指的是HTML元素在文档中按照从上到下、从左到右的顺序排列的方式。也就是说，文档流是一种元素在页面中默认的排列方式。而脱离文档流，就是指一个元素不再按照文档流的方式排列，而是在页面中“飘起来”了。

那么为什么相对定位会脱离文档流呢？这是因为，相对定位会在元素原本所在的位置上留下一个空档，而这个空档可以被其他元素占据。这就导致了元素脱离了文档流之后，原本在文档流中所占据的位置就被其他元素占了。

这里我们可以使用下面的代码来演示相对定位脱离文档流的情况：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  top: 50px;
  left: 50px;
}

p {
  width: 50px;
  height: 50px;
  background-color: blue;
}

我们在这里为一个div元素设置了相对定位，并将其向下移动了50px，向右移动了50px。接着，我们再添加一个p元素，这个元素从文档流的第一个位置开始排列。最后在浏览器中查看效果，可以看到蓝色的p元素直接覆盖在了红色的div元素的上面，因为相对定位使得div元素脱离了文档流。

在实际开发中，我们需要时刻注意使用定位属性时是否会脱离文档流，避免出现一些意外的排版问题。