如何用纯CSS实现ads banner隐藏时subMenu仍保持position fixed定位？

嘿，这个问题完全不需要JavaScript就能搞定！我给你两个实用的CSS方案，你可以根据项目的兼容性需求来选：

方案一：CSS变量 + :has伪类（现代浏览器友好） #

这个方案用CSS变量统一管理元素高度，再通过:has伪类动态检测广告栏的状态，自动更新子菜单的定位值，非常灵活。

代码示例 #

:root {
  --nav-height: 50px; /* 顶部导航的高度 */
  --ads-height: 80px; /* 广告栏默认高度 */
}

.top-nav {
  position: fixed;
  top: 0;
  height: var(--nav-height);
  width: 100%;
  background: #333;
  color: white;
}

.ads-banner {
  position: fixed;
  top: var(--nav-height);
  height: var(--ads-height);
  width: 100%;
  background: #ff9800;
}

/* 当广告栏添加了.hidden类隐藏时，把广告高度变量设为0 */
body:has(.ads-banner.hidden) {
  --ads-height: 0;
}

.sub-menu {
  position: fixed;
  /* 子菜单的top值 = 导航高度 + 广告栏高度（自动变化） */
  top: calc(var(--nav-height) + var(--ads-height));
  height: 40px;
  width: 100%;
  background: #2196f3;
  color: white;
}

说明 #

• 用--nav-height和--ads-height两个变量统一管理高度，后续修改只需要改变量值就行，不用到处找硬编码的数字。
• :has伪类可以检测页面中是否存在隐藏的广告栏，自动更新--ads-height的值，让子菜单的top值动态计算。
• 兼容性：Chrome、Firefox 121+、Safari等现代浏览器都支持，完全满足大部分项目需求。

方案二：包裹容器法（极致兼容性） #

如果你的项目需要兼容比较老的浏览器（比如不支持:has的版本），这个方法绝对靠谱——把广告栏和子菜单放在同一个固定定位的容器里，利用正常文档流的特性让子菜单自动“补位”。

代码示例 #

HTML结构调整

<div class="top-nav">Top Nav</div>
<!-- 用一个fixed容器包裹广告和子菜单 -->
<div class="fixed-container">
  <div class="ads-banner">Ads Banner</div>
  <div class="sub-menu">Sub Menu</div>
</div>
<div class="content">
  <!-- 页面内容 -->
</div>

CSS样式

.top-nav {
  position: fixed;
  top: 0;
  height: 50px;
  width: 100%;
  background: #333;
  color: white;
}

/* 固定定位的容器，top值等于顶部导航的高度 */
.fixed-container {
  position: fixed;
  top: 50px;
  width: 100%;
}

.ads-banner {
  height: 80px;
  background: #ff9800;
}

.sub-menu {
  height: 40px;
  background: #2196f3;
  color: white;
}

/* 隐藏广告栏的类 */
.hidden {
  display: none;
}

说明 #

• 外层的fixed-container固定在导航下方，里面的广告栏和子菜单用正常文档流布局（默认position: static）。
• 当广告栏被隐藏时，子菜单会自动向上移动到容器顶部，完全不需要手动计算top值。
• 兼容性：所有支持position: fixed的浏览器都能正常工作，包括IE7及以上（如果还需要兼容这么老的浏览器的话）。

总结 #

• 追求灵活性和现代浏览器支持：选方案一，用CSS变量+:has伪类，后续扩展更方便。
• 需要极致兼容性：选方案二，容器包裹法逻辑简单，稳得一批。

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