0

我已经创建了一个网站，但现在我遇到了 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。

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

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

谢谢你

4

2 回答 2

1

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

由于#wrap有一个负数z-index，它被放置在#inner-wrapper后者的堆叠索引中的内容之后。

也可以看看：

于 2012-04-15T20:57:33.867 回答
0

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

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

于 2012-04-15T21:03:55.960 回答