使用position: fixed时图片消失的问题求助

嘿，我刚瞅了你的代码，遇到fixed定位下图片消失的情况，大概率是堆叠上下文或者z-index的问题，咱们一步步来排查解决：

• 首先，你的外层fixed容器没设置z-index值！虽然图片所在的小div加了z-50，但这个z-index是相对它的父容器（那个fixed的div）的堆叠上下文来说的。如果页面里有其他元素（比如后面加载的内容）的z-index比这个fixed容器高，就会把整个fixed层盖住，看起来就像图片消失了。给外层的fixed div加上z-50（或者更高的数值，比如z-[999]），确保它能在其他元素的上层显示。

• 另外可以快速排查下：有没有可能是backdrop-filter的锅？有些浏览器在fixed元素上用这个模糊属性时，偶尔会出现渲染层面的小bug。你可以先临时把backdrop-filter那行注释掉，看看图片会不会出现——要是出现了，那就是这个属性的问题，后续可以用其他方式模拟模糊背景，比如在fixed元素下面加个绝对定位的模糊层。

• 最后确认下fixed容器的溢出设置：你的代码里没加overflow:hidden，所以这条可能性不高，但还是提一句——如果fixed容器加了overflow:hidden，可能会意外裁剪内部元素，不过你现在的代码里没有，所以这条可以先忽略。

给你修改后的代码参考，主要就是给外层fixed div加了z-50：

<div style="backdrop-filter: blur(10px);" class="p-3 w-full border-b fixed border-[#E4E4E7] z-50">
  <div class="flex justify-between mx-3">
    <div class="p-2 rounded-xl bg-[#564DE6] transition-all duration-50">
      <button class="text-white"> Add new </button>
    </div>
    <div class="border border-[#bebec3] rounded-[50%] flex cursor-pointer">
      <img class="p-1" width="38" src="https://placehold.co/100x100/orange/black?text=L" alt="Logo" />
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

你先试试这个修改，应该就能看到图片了。如果还是不行，再检查下页面里其他元素的z-index设置，把fixed容器的z-index调得比它们高就好~

内容来源于stack exchange