CSS media query如何让固定定位nav内的元素相对于视口固定在底部

问题根因 #

你遇到的现象是fixed定位的包含块规则导致的：正常情况下position: fixed的元素包含块是视口，但如果它的祖先元素设置了transform、perspective、filter、backdrop-filter或者will-change: transform这类属性时，fixed元素的包含块会变成这个祖先元素，就会出现你说的相对于nav定位的情况。

可行解决方案 #

方案1：移除nav特殊属性（最简便）

先检查你的nav元素是否设置了上面提到的几类属性，如果业务允许直接移除，你现有的CSS稍作补充就可以正常生效，.filter会直接相对于视口固定在底部。记得额外给移动端的body加一个和.filter高度一致的padding-bottom，避免页面底部内容被筛选器遮挡。
修改后代码参考：

/* 确认nav没有transform/filter等特殊属性 */
nav {
  position: fixed;
  top: 0;
  width: 100vw;
  background: yellow;
  z-index: 2;
}

@media (max-width: 500px) {
  /* 给body加底部内边距避免内容被遮挡，数值等于你的.filter实际高度 */
  body {
    padding-bottom: 60px;
  }
  .filter {
      position: fixed;
      bottom: 0;
      left: 0; /* 明确指定left:0，避免继承父元素的偏移 */
      width: 100vw;
      background: green;
      z-index: 3;
  }
}

方案2：无法修改nav属性时的兼容方案

如果业务中nav必须保留transform这类特殊属性，可以不用改HTML结构，通过偏移计算实现底部定位：

@media (max-width: 500px) {
  body {
    padding-bottom: 60px;
  }
  .filter {
    position: fixed;
    /* 相对于nav定位的情况下，向下偏移到视口底部，dvh适配移动端地址栏变化 */
    transform: translateY(calc(100dvh - 100%));
    left: 0;
    width: 100vw;
    background: green;
    z-index: 3;
  }
}

方案3：全兼容无JS方案（最稳妥）

如果以上方案都有兼容性问题，可以直接通过双元素显隐控制实现，完全不需要JS，规避iOS兼容问题，仅需要多写一段重复的筛选器HTML：
调整后的HTML：

<nav>
    <div class='nav__links'>
      <a>Page 1</a>
      <a>Page 2</a>
    </div>
    <!-- 桌面端显示的筛选器 -->
    <div class='filter filter--desktop'>
      <button>Category A</button>
      <button>Category B</button>
    </div>
</nav>
<!-- 移动端显示的筛选器，直接放在body下 -->
<div class='filter filter--mobile'>
  <button>Category A</button>
  <button>Category B</button>
</div>

对应CSS：

nav {
  position: fixed;
  top: 0;
  width: 100vw;
  background: yellow;
  z-index: 2;
}
.filter--mobile {
  display: none;
}

@media (max-width: 500px) {
  .filter--desktop {
    display: none;
  }
  .filter--mobile {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    background: green;
    z-index: 3;
  }
  body {
    padding-bottom: 60px;
  }
}

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