html - 我的网页内容一直与我的背景图片幻灯片重叠，我已经尽我所能来解决这个问题

Question

您可以在https://enigterry.github.io/nwtest.html预览该站点。这是我的代码的链接https://github.com/enigterry/enigterry.github.io/blob/main/nwtest.html

标签： htmlcssoverlapping

Answer 1

问题在于z-index. 您需要添加高于 0 的 z-index（这是为 hero 设置的），但为了安全起见，请说 99。此外，要使 z-index 正常工作，您需要position将relative. 另一个问题是添加到容器中的黑色背景遍布整个页面。删除它并应用于.w3-content. 您仍然需要处理填充以使其看起来更好。

.w3-content {
    max-width: 980px;
    background-color: #000;
    position: relative;
    z-index: 99;
 }