我们如何在Tailwind CSS中处理图层

pw9qyyiw 于 2023-03-05 发布在其他

关注(0)|答案(2)|浏览(135)

这是登录页Landing Page Website Raact。
当我向下滚动时，我的滑块出现在导航栏的前面，显示在底部图像Error in this Part中。所以请帮助我将滑块放在导航栏的后面。
我希望滑块在导航栏的下方滚动到上面。我一直保持导航栏固定。

2条答案

如果您正在使用position: fixed，HTML结构类似如下...

<body>
 <header style="position: fixed"/>
 <main> 
   <!-- rest of your scrollable content> 
 </main>
</body>

你可以交换头元素和主元素的顺序：

<body>
 <main> 
   <!-- rest of your scrollable content> 
 </main>
 <header style="position: fixed"/>
</body>

由于<header>现在在DOM结构中的位置较晚，因此它将具有较高的z-index，因此将显示在<main>内容的顶部，并且由于您使用的是position: fixed，因此元素在页面上的位置实际上不会改变。

在CSS文件中，为标题给予比滑块更高的z轴。例如z-index: 999;