Tailwind中Banner单独设sticky无效，仅父section生效的问题求助

我给Banner 1和Banner 2的div设置sticky定位时没效果，但把sticky加在包裹它们的section上却正常工作。我不想给section设sticky，只想让这两个Banner的div始终固定在顶部，同时不影响中间的欢迎消息。我用的Tailwind CSS，没写自定义CSS，相关代码如下：

<!-- Banner 1 Name -->
<div class="sticky top-0 z-50">
  <h1 class="text-neutral-950 my-10 mr-10 font-light text-lg md:text-5xl leading-10 border-y-4 border-r-4 py-3 pr-8 pl-32 rounded-r-xl border-current bg-sky-600 bg-opacity-80 backdrop-blur-sm">
    Bdojie Zzkef,
  </h1>
</div>

<!-- Message bienvenue -->
<div id="welcome-message" class="font-light animate__animated animate__tada animate__infinite animate__slower text-center text-red-400 text-xl md:text-6xl">Bienvenue! 👋🏼</div>

<!-- Banner 2 contact -->
<div class="flex justify-end align-center ml-10 my-10 border-y-4 border-l-4 py-3 pr-2 rounded-l-xl border-neutral-950 bg-sky-600 bg-opacity-80 backdrop-blur-sm sticky top-0 z-50">
  <a href="https://www.linkedin.com/in//" target="_blank" class="fab fa-linkedin mx-5 font-light" style="color: neutral-950;" title="Linkedin">
  </a>
  <a href="https://github.com/ValMtp3" target="_blank" class="fa-brands fa-square-github mx-5" style="color: neutral-950;" title="GitHub">
  </a>
  <a href="mailto:" target="_blank" class="fa-solid fa-square-envelope mx-5" style="color: neutral-950;" title="Mail">
  </a>
  <a href="assets_index/CV.pdf" target="_blank" class="fa-solid fa-address-card ml-5" style="color: neutral-950;" title="CV">
  </a>
</div>

</section>

问题根源 #

要让sticky定位生效，得满足两个关键条件：

• 元素的父容器不能加overflow: hidden/auto/scroll这类会裁剪内容的属性，不然会切断sticky的定位上下文
• 父容器的高度必须比元素自身高，这样元素才有“滚动出父容器视口”的空间，触发固定效果

你这情况就是：给section加sticky时，section本身变成固定定位，内部元素自然跟着固定；但给单个div加sticky时，section的高度可能刚好容纳所有元素，没有足够滚动空间触发sticky，或者section的默认样式干扰了定位上下文。

两种解决办法 #

方案1：改用fixed定位（直接满足“始终固定顶部”需求） #

如果就是想让两个Banner一直钉在顶部，用fixed比sticky更合适，调整下top值避免重叠就行：

• Banner1设fixed top-0 left-0 right-0 z-50，占满顶部宽度
• Banner2设fixed top-[第一个Banner的高度] left-0 right-0 z-50（比如第一个Banner高度约80px，就用top-20，根据实际显示效果调整）
• 给中间的欢迎消息加mt-[两个Banner总高度]的上边距，避免被固定的Banner挡住

修改后的代码示例：

<!-- Banner 1 Name -->
<div class="fixed top-0 left-0 right-0 z-50">
  <h1 class="text-neutral-950 my-10 mr-10 font-light text-lg md:text-5xl leading-10 border-y-4 border-r-4 py-3 pr-8 pl-32 rounded-r-xl border-current bg-sky-600 bg-opacity-80 backdrop-blur-sm">
    Bdojie Zzkef,
  </h1>
</div>

<!-- Message bienvenue -->
<div id="welcome-message" class="mt-28 font-light animate__animated animate__tada animate__infinite animate__slower text-center text-red-400 text-xl md:text-6xl">Bienvenue! 👋🏼</div>

<!-- Banner 2 contact -->
<div class="fixed top-20 left-0 right-0 z-50 flex justify-end items-center ml-10 my-10 border-y-4 border-l-4 py-3 pr-2 rounded-l-xl border-neutral-950 bg-sky-600 bg-opacity-80 backdrop-blur-sm">
  <a href="https://www.linkedin.com/in//" target="_blank" class="fab fa-linkedin mx-5 font-light" style="color: neutral-950;" title="Linkedin">
  </a>
  <a href="https://github.com/ValMtp3" target="_blank" class="fa-brands fa-square-github mx-5" style="color: neutral-950;" title="GitHub">
  </a>
  <a href="mailto:" target="_blank" class="fa-solid fa-square-envelope mx-5" style="color: neutral-950;" title="Mail">
  </a>
  <a href="assets_index/CV.pdf" target="_blank" class="fa-solid fa-address-card ml-5" style="color: neutral-950;" title="CV">
  </a>
</div>

方案2：修复sticky定位的上下文（坚持用sticky的话） #

如果一定要用sticky，得调整DOM结构，让Banner的父容器变成整个页面的滚动容器（比如body）：

• 把两个Banner移出原来的section，直接放在body标签下
• 给Banner2设置合适的top值，避免和Banner1重叠

修改后的代码示例：

<!-- Banner 1 Name -->
<div class="sticky top-0 z-50">
  <h1 class="text-neutral-950 my-10 mr-10 font-light text-lg md:text-5xl leading-10 border-y-4 border-r-4 py-3 pr-8 pl-32 rounded-r-xl border-current bg-sky-600 bg-opacity-80 backdrop-blur-sm">
    Bdojie Zzkef,
  </h1>
</div>

<section>
  <!-- Message bienvenue -->
  <div id="welcome-message" class="font-light animate__animated animate__tada animate__infinite animate__slower text-center text-red-400 text-xl md:text-6xl">Bienvenue! 👋🏼</div>
</section>

<!-- Banner 2 contact -->
<div class="sticky top-[80px] z-50 flex justify-end items-center ml-10 my-10 border-y-4 border-l-4 py-3 pr-2 rounded-l-xl border-neutral-950 bg-sky-600 bg-opacity-80 backdrop-blur-sm">
  <a href="https://www.linkedin.com/in//" target="_blank" class="fab fa-linkedin mx-5 font-light" style="color: neutral-950;" title="Linkedin">
  </a>
  <a href="https://github.com/ValMtp3" target="_blank" class="fa-brands fa-square-github mx-5" style="color: neutral-950;" title="GitHub">
  </a>
  <a href="mailto:" target="_blank" class="fa-solid fa-square-envelope mx-5" style="color: neutral-950;" title="Mail">
  </a>
  <a href="assets_index/CV.pdf" target="_blank" class="fa-solid fa-address-card ml-5" style="color: neutral-950;" title="CV">
  </a>
</div>

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