TailwindCSS桌面端：如何让装饰气泡可见且不干扰内容交互？

问题背景 #

桌面端使用TailwindCSS开发的网页存在矛盾：蓝色内容区域的装饰气泡因z-index设置无法显示；调整z-index让气泡可见后，内容文本无法选中、按钮无法点击。需要实现气泡可见且内容可正常交互。

解决方案 #

核心问题是z-index层级冲突与装饰容器拦截交互事件，调整步骤如下：

• 移除section标签上自定义的z-index:10，避免创建不必要的堆叠上下文干扰内部元素层级
• 确保蓝色内容容器（带bg-[#1fa7e0]的div）设置relative z-10，让它层级高于白色装饰气泡
• 给白色装饰气泡的容器（absolute inset-0 z-0的div）添加pointer-events-none，让其不拦截鼠标点击、文本选择等交互事件

修改后的完整代码 #

<script src="https://cdn.tailwindcss.com"></script>
    
<section
  class="bg-white md:py-20 pb-0 md:pb-28 overflow-hidden md:overflow-visible"
  style="position:relative"
>
  <div class="background-overlay2"></div>

  <div class="container mx-auto flex flex-col md:flex-row items-center">
    <div class="hidden md:block md:w-1/2">
      <img 
        src="https://placehold.co/600x400" 
        alt="Random image" 
        class="md:rounded-lg shadow-lg object-cover w-full h-full"
      >
    </div>

    <div class="relative md:w-1/2"> 
      <!-- Content Container (foreground content) -->
      <div class="relative bg-[#1fa7e0] text-white p-8 py-12 pb-16 md:rounded-lg shadow-lg md:-ml-10 z-10">
        <h1 class="text-3xl md:text-4xl font-semibold mb-6">
          Discover <span class="font-bold">The Wonders of The Universe</span>
        </h1>
        <p class="text-xl md:text-lg font-semibold leading-relaxed mb-4">
          Explore a vast array of adventures and possibilities.<br>
          From ancient myths to modern science, embark on a journey of knowledge and exploration.
        </p>
        <p class="text-xl md:text-lg leading-relaxed mb-6">
          Immerse yourself in diverse cultures, futuristic technologies, and timeless stories that shape the world around us.
        </p>
        <button class="bg-[#efd553] text-black font-bold px-8 py-3 rounded-full hover:bg-yellow-500">
          Dive In
        </button>
      </div>

      <!-- ✨ White bubbles in background -->
      <div class="absolute inset-0 z-0 overflow-hidden pointer-events-none">
        <!-- Bubble 1 -->
        <div class="absolute w-16 h-16 bg-white opacity-10 rounded-full top-4 left-6 animate-pulse"></div>
        <!-- Bubble 2 -->
        <div class="absolute w-10 h-10 bg-white opacity-10 rounded-full top-24 left-1/2 animate-bounce"></div>
        <!-- Bubble 3 -->
        <div class="absolute w-20 h-20 bg-white opacity-5 rounded-full bottom-10 right-10 animate-ping"></div>
        <!-- Bubble 4 -->
        <div class="absolute w-12 h-12 bg-white opacity-15 rounded-full bottom-0 left-12 animate-bounce"></div>
      </div>
    </div>
  </div>
  
  <!-- Bubble shapes -->
  <div class="absolute inset-0 pointer-events-none">
    <!-- Bubble 1 -->
    <div class="absolute w-48 h-48 bg-[#77c434] rounded-full opacity-50 floaty" style="top: 10%; left: 15%; transform: rotate(12deg);"></div>

    <!-- Bubble 2 -->
    <div class="absolute w-60 h-60 bg-[#5e16eb] rounded-full opacity-40 floaty" style="top: 25%; left: 65%; transform: rotate(-25deg);"></div>

    <!-- Bubble 3 -->
    <div class="absolute w-40 h-40 bg-[#fa5755] rounded-full opacity-60 floaty" style="top: 60%; left: 30%; transform: rotate(8deg);"></div>

    <!-- Bubble 4 -->
    <div class="absolute w-72 h-72 bg-[#efd553] rounded-full opacity-50 floaty" style="top: 65%; left: 80%; transform: rotate(-6deg);"></div>
  </div>
</section>

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