Question

我正在尝试在页面中添加侧边栏。页面上的主体容器有一个盒子阴影，所以我希望侧边栏看起来好像它从容器下方出来，所以阴影将位于它的顶部。我使我的侧边栏div成为body容器的直接子项（具有position：relative），并将其位置设置为绝对位置，然后使用顶部和右侧位置值定位它。我把它放在正确的地方，然后应用负z-指数使它在身体下面。问题是，这使得我放在侧边栏中的任何链接都在IE9中无法点击。我不知道如果不敲除链接我怎么能做到这一点。有什么想法吗？

我会发一个显示示例的页面的链接，但我正在积极地对它进行更改，所以当你点击它时，你可能不会看到我想要的东西。我会试着更好地解释一下。

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

侧边栏是身体容器的直接子（第一个孩子）。它具有固定的宽度，绝对位置，填充等，并且应用了顶部和右侧位置，并且z指数为-100。

这是一个链接：

http://reachchallenges.infectionist.com

Answer 1

您可以删除否定z-index，并在侧边栏上添加inner shadow，与.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）。

负z-index敲除了链接

2 个答案: