如何消除导航栏（navbar）下拉菜单展开时的元素间隙？

核心问题在于：position: static会让下拉内容占据文档流空间，直接撑开父元素导致导航栏里的Artworks和Store被挤开出现间隙；而position: absolute脱离文档流不会影响导航栏布局，但需要额外处理宽度和居中问题，按下面的步骤调整即可：

• 给下拉菜单的父容器（比如.dropdown）设置position: relative，让下拉内容的定位基准锚定到这个父容器
• 给.dropdown-content设置以下样式实现全屏宽度+居中：

  .dropdown-content {
    position: absolute;
    top: 100%; /* 紧贴导航栏底部 */
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    width: 100vw; /* 拉满视口宽度 */
    box-sizing: border-box; /* 避免padding撑宽元素 */
    z-index: 999; /* 确保下拉内容在最上层 */
    /* 其他自定义样式：背景、边框等 */
    background-color: #fff;
    border-top: 1px solid #e5e5e5;
    padding: 1.5rem;
  }
  

• 导航栏的原有布局不用动，因为position: absolute的下拉内容脱离了文档流，不会再撑开父元素，Artworks和Store之间的间隙自然就消失了

补充说明：

• 用left: 50% + transform: translateX(-50%)做居中，比margin: 0 auto更适合绝对定位元素，不管下拉内容宽度多少都能精准居中
• width: 100vw是直接基于视口宽度设置，确保下拉内容和页面同宽，不会受父容器宽度限制

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