首页 文章

负z-index敲除了链接

提问于
浏览 次
3

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

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

正文容器宽720像素，并具有自动边距，使其显示在页面的中心 . 它是相对的 .

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

这是一个链接：

http://reachchallenges.infectionist.com

html css position z-index

2 回答

  • 0

    您可以删除负 z-index 并将inner shadow提供给侧栏，该侧栏与 .body 元素的外部阴影相同 .

    您必须尝试查看它如何影响侧边栏的边框 .

    回复于
  • 0

    我不完全明白需要什么效果，但也许这个准确的小提琴可以提供一些关于如何处理这类问题的提示 .

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

    回复于

相关问题