设置position:fixed后顶部导航栏被商品卡片遮挡问题求助

问题根源 #

1. 固定定位元素未设置足够高的层级，导致被商品卡片覆盖
2. 固定定位脱离文档流后，后续内容未预留空间，出现遮挡
3. 顶部导航的固定属性配置不完整，导致滚动时无法保持固定

修改后的完整CSS代码 #

html {
  scroll-behavior: smooth;
}

body {
  background-color: #EFEFEF;
  /* 预留顶部导航高度，避免内容被遮挡 */
  padding-top: 55px;
}

#top-nav {
  background-color: #1B2430;
  padding-top: 10px;
  padding-bottom: 10px;
  /* 配置固定定位，锁定在顶部 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 设置更高层级，确保在其他元素之上 */
  z-index: 700;
}

#sidebarMenu {
  position: fixed !important;
}

/* Logo */
.navbar-brand {
  color: #007bff !important;
  font-size: 20px;
  padding-left: 10px;
  padding-right: 150px;
}

/* NavBar Text Links */
.nav-link {
  color: white !important;
}

.nav-link:hover {
  color: white !important;
}

/* Navbar Text */
.navbar-nav {
  padding-left: 30px;
}

/* Search Button */
.btn-1 {
  color: #007bff;
  border-color: white;
}

/* Checkout Cart */
.cart {
  color: white;
  padding-top: 7px;
  padding-left: 160px;
}

/* Sidebar */
.sidebar {
  background-color: #1B2430 !important;
  position: fixed;
  /* 对齐顶部导航底部 */
  top: 55px;
  bottom: 0;
  left: 0;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
  width: 240px;
  z-index: 600;
  padding-top: 10px;
}

.text-color {
  color: white;
}

.list-group-item {
  background-color: #1B2430;
}

.list-group-item.active {
  background-color: #1B2430;
}

/* Sign out  */
.sign-out {
  padding-top: 200px !important;
  padding-left: 10px;
  color: white;
}

.sign-out:hover {
  color: white;
}

.power-btn {
  color: red;
}

/* Product Style Cards */
#style-card {
  align-items: center;
  padding-left: 240px;
}

.container-fluid {
  padding-top: 20px;
}

.img-fluid {
  height: 200px;
  padding-top: 15px;
}

.btn-secondary {
  background-color: #007bff;
}

hr {
  background-color: #007bff;
}

关键修改说明 #

• 给#top-nav添加完整的固定定位配置：position: fixed; top: 0; left: 0; width: 100%，确保导航栏固定在顶部且铺满屏幕宽度
• 设置z-index: 700，高于侧边栏的z-index:600，保证导航栏不会被其他元素遮挡
• 给body添加padding-top: 55px，预留出导航栏的高度，避免页面内容被固定导航覆盖
• 保持侧边栏的top:55px，确保其与顶部导航栏底部对齐，避免重叠

调整建议 #

如果导航栏实际高度不是55px，可通过浏览器开发者工具查看准确高度后，修改body的padding-top和侧边栏的top值，确保布局匹配。

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