css - z-index 和链接的问题

Question

相关网站链接:http://www.christopherwarrington.com/testing_ground

我有一个设置为 z-index 100 的开始屏幕，以确保它位于所有其他 DIV 之上。当您单击 Enter 按钮时，“开始”屏幕会滑开。

主 DIV 设置为 50 的 z-index。

问题是，当开始屏幕滑开时，您可以阅读主 DIV 中的所有内容，但不一定能单击链接。您可以在第 3 段末尾看到这种效果。如果将鼠标滚动到链接上，左侧将不允许您单击它，但右侧可以。

现在，如果我将主 DIV 的 z-index 更改为高于开始屏幕的 z-index，所有链接都可以访问，但是开始屏幕在主 DIV 后面上下滑动，这没有用。

我很茫然。我不知道为什么当“开始”屏幕滑出 View 时，它为什么会阻止链接工作。我确信我遗漏了一些明显的东西，我很感激来自额外双眼的任何建议。谢谢。

Answer 1

开始屏幕 div 覆盖了其余内容，因此看似在链接上的点击实际上是在开始屏幕上，因此什么都不做。不知何故，起始 div 的底部区域是透明的，因此它覆盖了这些链接并使它们无法点击，即使您甚至看不到它。解决此问题的最简单方法可能是摆脱透明部分。解决此问题的最简单方法是去除透明部分，它来自带有 id="enter_btn_wrapper" 的 div。 div 当前设置为 500px 的高度和 300px 的宽度，这使得它正好位于页面中间，位于您的内容上方。它并没有涵盖所有内容；请注意，您仍然可以毫无问题地单击页面下方或一侧的链接。

鉴于此 div 所做的只是为您提供了一个句柄，您可以将实际的 div 与按钮作为其背景 75px 左右，您可以将其高度设置为 0px 并且一切顺利。