fixed布局踩坑引发的反思

fixed布局，相信很多前端开发者都曾踩过坑。我记得我第一次使用fixed布局的时候，也是费了好大劲才搞明白。之所以会出现这个问题，是因为fixed布局并不是一定相对于屏幕视口定位的，而是在某些情况下，它也会相对于父元素定位。这就会导致一些意想不到的问题。

要理解这个问题，我们首先需要了解一下fixed定位、相对定位和绝对定位的区别。

• fixed定位： 元素相对于屏幕视口定位，无论如何滚动页面，元素都会保持在原地。
• 相对定位： 元素相对于其正常位置定位，无论如何滚动页面，元素都会保持相对其正常位置的偏移量。
• 绝对定位： 元素相对于其最近的已定位父元素定位，无论如何滚动页面，元素都会保持相对其最近的已定位父元素的偏移量。

知道了这三种定位方式的区别，我们再来看看fixed布局踩坑的例子。

<div id="wrapper">
  <div id="header">
    这是头部
  </div>
  <div id="content">
    这是内容
  </div>
  <div id="footer">
    这是尾部
  </div>
</div>

#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

#content {
  margin-top: 100px;
}

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

在这个例子中，我们对头部和尾部使用了fixed定位，并设置了top/bottom/left/right属性，使其在页面中固定。同时，我们对内容部分设置了margin-top: 100px，使其与头部保持一定的距离。

当我们滚动页面时，我们会发现头部和尾部始终固定在页面顶部和底部，而内容部分则会随着页面滚动而移动。这是因为头部和尾部使用了fixed定位，相对于屏幕视口定位，因此无论如何滚动页面，它们都会保持在原地。而内容部分使用了相对定位，相对于其正常位置定位，因此当页面滚动时，它会保持相对其正常位置的偏移量，即margin-top: 100px。

如果我们想让内容部分也随着页面滚动而移动，我们需要将content的position属性改为fixed。这样，内容部分就会相对于屏幕视口定位，无论如何滚动页面，它都会保持在原地。

#content {
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
}

当我们再次滚动页面时，我们会发现内容部分也会随着页面滚动而移动。这是因为content现在也使用了fixed定位，相对于屏幕视口定位，因此无论如何滚动页面，它都会保持在原地。

通过这个例子，我们可以看到，fixed定位、相对定位和绝对定位都有不同的作用。在使用fixed布局时，我们需要根据具体的情况来选择合适的定位方式。如果我们想让元素相对于屏幕视口定位，可以使用fixed定位。如果我们想让元素相对于其正常位置定位，可以使用相对定位。如果我们想让元素相对于其最近的已定位父元素定位，可以使用绝对定位。

希望通过这篇文章，能够帮助大家更好地理解前端布局的知识。