粘性导航栏未遮挡滚动元素及横向滚动失效问题求助

1. 修复导航栏遮挡内容的问题 #

你的问题根源在于sticky导航栏不在滚动容器内部：当前nav和rows是同级元素，而rows自身是滚动容器（设置了overflow-y: auto），所以nav的sticky定位无法作用于rows的滚动行为，导致滚动时内容会跑到nav下方。

解决步骤：

• 将nav移动到rows容器内，作为第一个子元素，让它成为滚动容器的一部分
• 给nav添加背景色和z-index，确保它能覆盖下方内容，避免透显
• 保留position: sticky; top: 0，让它在rows滚动时固定在顶部

修改后的核心样式和结构：

.nav {
  position: sticky;
  top: 0;
  background: #fff; /* 添加背景色遮挡内容 */
  z-index: 1; /* 确保导航栏在内容上方 */
  padding: 4px; /* 可选，提升视觉舒适度 */
}

<div class="main">
  <div class="rows">
    <div class="nav">navnavnavnavnavnavnavnavnavn</div> <!-- 移动到rows内部 -->
    <!-- 其他内容保持不变 -->
  </div>
</div>

2. 实现整体横向滚动的问题 #

当前overflow-x: auto不生效的原因是**rows容器的宽度被父元素main限制为100px**，而flex-direction: column的flex容器默认宽度继承父元素，不会自适应子元素的内容宽度，导致超长文本直接溢出容器，但不会触发main的横向滚动。

解决步骤：

• 给rows设置width: fit-content（或min-width: fit-content），让它的宽度自适应子元素的内容宽度
• 可选：给子元素添加white-space: nowrap，确保超长文本不换行，更直观地触发横向滚动

修改后的核心样式：

.rows {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: #da1039;
  width: fit-content; /* 让容器宽度自适应内容 */
}
.rows > div {
  white-space: nowrap; /* 可选，禁止文本换行 */
}

这样main的max-width: 100px和overflow-x: auto就会生效，当rows的宽度超过100px时，main会显示横向滚动条。

完整修改后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.main { 
  height: 100px; 
  max-width: 100px; 
  overflow-x: auto; 
  border: 1px solid #ccc; /* 可选，方便查看容器范围 */
}
.nav { 
  position: sticky; 
  top: 0; 
  background: #fff; 
  z-index: 1;
  padding: 4px;
}
.rows { 
  display: flex; 
  flex-direction: column; 
  overflow-y: auto; 
  background: #da1039; 
  width: fit-content;
}
.rows > div {
  white-space: nowrap;
  padding: 4px;
}
</style>
</head>
<body>
<div class="main">
  <div class="rows">
    <div class="nav">navnavnavnavnavnavnavnavnavn</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
    <div>asdddssssssssssssssssssssssssssssssssssssdddddddd</div>
  </div>
</div>
</body>
</html>

内容的提问来源于stack exchange，提问作者BAKE ZQ