CSS导航栏下拉菜单fixed与sticky定位异常问题求助

• position: fixed的定位基准是浏览器视口，和父级导航栏没有绑定关系，所以页面滚动时导航栏移动后，下拉菜单仍然固定在视口的初始位置，不会跟随导航栏移动。
• position: sticky的两个特性导致出现异常：第一，sticky元素默认处于常规文档流中，展开时会占据实际页面空间，因此会挤压下方内容；第二，sticky元素宽度默认继承父容器宽度，没有做限制的情况下就会拉伸到导航栏容器全宽，且sticky的生效高度受父级容器尺寸限制，本身不适合用在独立的下拉弹出层上。

正确的实现逻辑是将滚动跟随的特性绑定在整个导航栏上，下拉菜单使用绝对定位和父级导航项绑定，具体修改如下：

1. 给整个导航栏的外层容器添加sticky定位，让导航栏整体滚动时固定在视口顶部，实现滚动跟随效果
2. 给下拉菜单的父容器.dropdown设置position: relative作为定位基准，同时删除原有的overflow: hidden（该属性会裁剪超出容器范围的下拉菜单，可改用伪元素清除浮动）
3. 下拉菜单.dropdown-content改用position: absolute定位，脱离常规文档流，不会挤压下方内容，同时可自主控制宽度不会自动拉伸

修改后的代码示例：

/* 导航栏外层容器，需新增的样式 */
.nav-container {
  position: sticky;
  top: 0; /* 滚动到顶部时吸附，可根据需求调整数值 */
  z-index: 999; /* 保证导航栏在所有内容上层 */
}

.dropdown {
  float: left;
  position: relative; /* 新增，作为下拉菜单的定位父级 */
  /* 删除原有overflow: hidden属性 */
}
/* 新增伪元素清除浮动，替代overflow:hidden的作用 */
.dropdown::after {
  content: "";
  display: table;
  clear: both;
}

.dropdown-content {
  display: none;
  position: absolute; /* 替换原来的fixed/sticky属性 */
  background-color: #1F2833;
  z-index: 1;
  width: 200px; /* 可根据需求自定义下拉菜单宽度，不会被自动拉伸 */
}

修改后整个导航栏会跟随页面滚动，下拉菜单和导航项绑定，同时保留浮层效果，不会挤压下方内容，宽度也可自主控制，完全符合需求。

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