负 z 索引会淘汰链接

Question

我正在尝试向我的页面添加侧边栏。页面上的主体容器有一个盒子阴影，所以我希望侧边栏看起来好像它是从容器下方出来的，这样阴影就会在它的上面。我将侧边栏 div 设为主体容器的直接子级（其位置：相对），并将其位置设置为绝对位置，然后使用顶部和右侧位置值对其进行定位。我把它放在正确的位置，然后应用负 z 索引，使其位于身体下方。问题是，这使得我放在侧边栏中的任何链接在除 IE9 之外的所有浏览器中都无法单击。我不知道在不删除链接的情况下我还能如何完成此任务。有什么想法吗？

我会发布一个指向显示示例的页面的链接，但我正在积极对其进行更改，因此当您单击它时，您可能不会看到我要做什么。我会尽力解释得更好。

正文容器的宽度为 720 像素，并具有自动边距，因此它显示在页面的中心。它是相对定位的。

侧边栏是主体容器的直接子级（第一个子级）。它具有固定宽度、绝对位置、填充等，并应用了顶部和右侧位置，以及 -100 的 z 索引。

这是一个链接：

http://reachchallenges.infectionist.com

Answer 1

您可以删除负 z-index 并提供内阴影 到侧边栏，与 .body 元素的外部阴影相同。

您必须尝试一下，看看它如何影响侧边栏的边框。

Answer 2

我不完全理解需要什么效果，但也许这个简单的小提琴可以给出一些关于如何解决此类问题的提示。

jsfiddle

让链接正常工作的方法是将 z-index 切换回正数。您的 CSS 将如下所示：

.z-index1{
    z-index: 1 !important;
}

您的 JS 应该是：

$("#div-on-top").click(function(){
    $("#div-on-bottom").toggleClass("margin");
    $("#div-on-bottom").toggleClass("z-index1");
});

单击 #div-on-top 会将其移开，显示 #div-on-bottom 及其还将把 #div-on-bottom 带到顶部，使链接可点击。

我还在 #div-on-top 上应用了阴影，它看起来不错（对我来说；参见 jsfiddle）。