CSS 多个顶部固定 div

在本文中，我们将介绍如何使用 CSS 实现多个顶部固定的 div。在网页设计中，经常需要将某些元素固定在页面的顶部，以便在滚动页面时保持它们的位置。但是，当页面上有多个需要固定的 div 时，我们需要一些特殊的技巧来实现这一点。

阅读更多：CSS 教程

使用 position: sticky

CSS 中的 position 属性有几个可用的值，其中之一是 sticky。使用 sticky 定位可以将元素固定在其容器的指定位置，当页面滚动到该位置时，元素将立即变为 fixed 定位并停留在该位置。

首先，我们需要为每个需要固定的 div 添加一个共同的类名，例如 “top-fixed”。接下来，在 CSS 中，我们为该类名添加以下样式：

.top-fixed {
  position: sticky;
  top: 0;
}

这将使带有 “top-fixed” 类名的元素固定在页面顶部。我们还可以使用 z-index 属性来控制元素的层叠顺序，确保它们位于其他内容的上方。

.top-fixed {
  position: sticky;
  top: 0;
  z-index: 9999;
}

限制滚动区域

当页面上有多个顶部固定的 div 时，它们可能会互相遮挡。为了解决这个问题，我们需要为每个固定元素的容器添加一些样式，以限制它们的滚动区域。

.container {
  overflow-x: hidden;
  overflow-y: auto;
}

通过将容器的 overflow-x 设置为 hidden，我们可以防止水平滚动条出现。同时，通过将 overflow-y 设置为 auto，我们可以使容器在需要时显示垂直滚动条。这样，当页面滚动时，只有容器的内容会滚动，而顶部固定的 div 将保持在视觉上的固定位置。

示例演示

下面是一个示例页面，其中包含了两个顶部固定的 div：

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Multiple Top-Fixed Divs</title>
    <style>
      .top-fixed {
        position: sticky;
        top: 0;
        z-index: 9999;
        background-color: #f2f2f2;
        padding: 10px;
        border-bottom: 1px solid #ccc;
      }

      .container {
        overflow-x: hidden;
        overflow-y: auto;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="top-fixed">顶部固定 div 1</div>
      <!-- 容器的其他内容 -->
    </div>

    <div class="container">
      <div class="top-fixed">顶部固定 div 2</div>
      <!-- 容器的其他内容 -->
    </div>
  </body>
</html>

在上面的示例中，我们使用了一个包含了两个容器的页面。每个容器都包含了一个带有 “top-fixed” 类名的 div，该 div 将固定在容器的顶部。容器的高度被限制为 300px，以便在超出容器高度时显示垂直滚动条。