Vue搭配Tailwind时DIV设置display:flex后背景色与z-index异常求助

问题根因 #

1. z-index层级异常 #

display:flex会触发元素的层叠上下文属性变化，你的#problem-div在DOM结构上处于navbar和section之后，默认渲染顺序更靠后：未设置flex时它是普通块级元素，层叠等级低于设置了定位的navbar和section；设置为flex容器后，它的层叠等级提升，且你没有给它显式设置层级，就会覆盖层级更高的子元素外部的定位元素，导致导航被遮挡。

2. 背景色显示异常 #

你仅给#problem-div的两个子元素设置了bg-black，没有给父容器本身设置背景色，flex布局默认会根据子元素内容计算宽高，当子元素宽度总和没有撑满父容器，或者flex对齐属性生效时，就会出现缝隙漏出底层背景，导致背景断裂的异常效果。

解决方案 #

直接修改#problem-div的class属性即可：

<div id="problem-div" class="flex relative z-0 bg-black w-full">

修改说明：

• 加relative z-0：显式指定容器的层叠等级为0，强制它处于z-40的渐变层和z-50的导航下方，不会遮挡上层元素
• 加bg-black：父容器直接设置背景色，避免子元素缝隙漏底
• 加w-full：强制flex容器撑满整个视口宽度，不会因为子元素宽度不足导致容器收缩

（可选优化）如果需要导航始终固定在视口底部，建议将#navbar的absolute改为fixed，避免滚动时导航跟随页面整体位移。

内容的提问来源于stack exchange，提问作者Justin.Arnold