如何在Tailwind CSS中让SVG图片上方的文字可见？（已尝试z-index）

问题原因 #

你给包含文字的div设置了z-20但未生效，核心原因是**z-index仅对非static定位的元素生效**。你的div默认是position: static，所以z-index不会参与层级计算，SVG依然会压在文字上方。

修复方案 #

给包含文字的div添加定位类（比如relative，不会破坏正常布局流），让z-index属性正常生效：

修改后的代码：

<body class="relative">
  <svg class="absolute z-10"> some path </svg>

  <div class="relative flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8 z-20">
    some code here 
  </div>
</body>

补充说明 #

• 只要元素的position属性为relative、absolute、fixed或sticky，z-index就能正常控制层级
• 如果SVG仅作为装饰背景，也可以直接将其设为body的背景图，无需绝对定位，从根源避免遮挡问题

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