在写CSS样式时，我们有一个非常有用的属性叫做“position”（位置）。其中，fixed（固定定位）是常见的一种值。

一些网站中的元素，例如导航栏或者广告栏，需要固定在页面的某个位置，不随着滚动条滑动而改变位置。这时候，我们可以使用fixed属性来实现这个效果。

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

上述代码会将class名为“nav-bar”的元素固定在页面的左上角，宽度为100%。这样，即使用户滚动页面，这个导航栏也会一直在页面顶部，不会离开用户的视线。

然而，如果我们不加以处理，fixed元素会脱离文档流（即不占用其他元素的空间），因此使用fixed的元素会对布局有所影响。

那么，如何让fixed元素不脱离文档流呢？我们可以通过给父元素添加一个padding-bottom属性，使父元素的高度可以占用fixed元素的高度。

.header {
  position: relative;
  height: 100px;
  padding-bottom: 50px;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
}

上述代码中，header是fixed元素的父元素，我们通过padding-bottom属性为它设置了空间。fixed元素nav-bar的高度为50px，我们在header中为它预留了50px的空间，这样nav-bar就不会影响其他元素的布局了。

这就是fixed元素不脱离文档流的解决方案。当我们需要使用fixed元素时，要记得给其父元素加上padding-bottom，以免影响其他元素的布局。