如何使用Tailwind CSS将HTML段落元素置于页脚SVG元素上层？

你遇到的z-index不生效问题，核心原因是z-index仅对设置了非static定位（relative/absolute/fixed/sticky）的元素生效，你当前段落p所在的容器是默认static定位，没有触发堆叠层级计算，所以SVG的z-index:-1无法和文本形成层级差。

基于Tailwind CSS的修改方案如下：

• 给页脚内最外层的mx-auto容器添加relative类，让内部绝对定位的SVG仅在页脚范围内定位，不会偏移到页面其他区域
• 给包裹段落的flex justify-center容器添加relative z-10类，主动触发该容器的堆叠层级计算，层级高于底层SVG
• 把SVG的内联定位样式替换为Tailwind原生类，保持代码风格统一

修改后的完整代码：

<footer>
  <div class="mx-auto relative">
    <div class="flex justify-center relative z-10">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, qui!</p>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="absolute -z-10">
      <path fill="#273036" fill-opacity="1" d="M0,224L30,224C60,224,120,224,180,202.7C240,181,300,139,360,122.7C420,107,480,117,540,106.7C600,96,660,64,720,69.3C780,75,840,117,900,144C960,171,1020,181,1080,154.7C1140,128,1200,64,1260,53.3C1320,43,1380,85,1410,106.7L1440,128L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"></path>
    </svg>       
  </div>
</footer>

如果需要调整段落的垂直位置，直接给包裹段落的容器加py-类调整上下内边距即可，不会影响SVG的位置。

内容的提问来源于stack exchange，提问作者John Phillip Abello