负的 z-index 值导致链接失效

Question

负的 z-index 值导致链接失效

3

我正在尝试在我的页面上添加侧边栏。页面上的主体容器有一个盒子阴影，所以我希望侧边栏看起来像是从容器下面出现，这样阴影就会在其上方。我将我的侧边栏div设置为body容器的直接子元素（它具有position: relative），并将其位置设置为absolute，然后使用top和right位置值进行定位。我已经把它放在了正确的位置，然后应用了负的z-index，使它位于body下面。问题是，这会使我放在侧边栏中的任何链接在除IE9之外的所有浏览器中都无法点击。我不知道还有什么其他方法可以实现这一点而不会影响链接。有什么建议吗？

我想发布一个显示示例的页面链接，但我正在积极地对其进行更改，所以当你单击它时，你可能看不到我想要的内容。我会尽力解释得更好。

主体容器宽度为720px，并具有自动边距，以使其在页面中居中显示。它被定位为相对位置。

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

这是一个链接：

http://reachchallenges.infectionist.com

- HaLo2FrEeEk

我认为这个问题无法回答，除非有a)一个实时示例b)一些源代码或最好的c)一个jsfiddle示例，可以重现该问题。 - Trufa

你的容器是否延伸到整个侧边栏？ - Ant

正文在视觉上并不覆盖侧边栏，但是当我在Chrome的开发者工具中查看时，由于外边距的原因，它会覆盖整个页面。我会在帖子中编辑一个链接，暂时不再处理。 - HaLo2FrEeEk

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- alexl · Answer 1

我不完全了解需要什么效果，但也许这个简洁的fiddle可以给出一些提示，如何处理这种问题。

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）。

- jeroen · Answer 2

您可以移除负的z-index，并给侧边栏添加一个与.body元素外部阴影相同的内部阴影。

您需要尝试一下才能看到它如何影响侧边栏的边框。