Question

我创建了一个网站，但现在我遇到了1个问题。我甚至无法点击链接和导航。

你可以看看： http://www.cambridgekitty.com/business-directory/ 检查真实的代码。

HTML

<div id="main-bg">
    <div id="left-side-logo"></div>
</div>

CSS

#wrap {
    padding: 0;
    position: relative;
    width: 100%;
}
#main-bg {
    background: url("../img/kittybg2-h.png") no-repeat scroll right top transparent;
    margin: 0 auto;
    min-height: 733px;
    position: relative;
    width: 100%;
    z-index: -9999;
}

只需在左侧添加徽标

#left-side-logo {
    background: url("../img/norwichkitty-final-logo-bg-02.png") no-repeat scroll 0 0 transparent;
    height: 500px;
    left: -150px;
    opacity: 0.8;
    position: absolute;
    top: -60px;
    width: 500px;
    z-index: -1;
}

并添加

    position: relative;

到#wrap。并添加

    z-index: -9999;

到＃main-bg。

但这样做之后......我无法点击徽标甚至导航链接。

请让我知道为什么我要解决这个问题。

谢谢

Answer 1

如果您不确切知道自己在做什么，请不要使用否定z-index。使用正值，只需将#left-side-logo的{{1}}设置为更高的值。

由于z-index的结果为#wrap，因此它位于后者堆叠索引中z-index的内容之后。

另见：

W3C: CSS2.1: 9 Visual formatting model (Section z-index)

Answer 2

如果我是你，我会简单地改变我应用不同背景图像的元素。为#inner-wrapper城市图片背景和#main-bg徽标背景。然后使用background-position属性定位徽标背景（目前是background规则中的两个零）。此外，如果您想要该徽标的不透明度，您只需在Photoshop或您喜欢的任何编辑器中设置它即可实现。

此解决方案意味着您不必处理z-index问题，并且可以实现更多无黑客和语义标记，尽管您确实有一些容器。希望这会有所帮助：）

z-index导致问题

2 个答案: