Question

我试图让我的导航非常具体。我希望背景是一个可靠的图像，我希望链接是分离的文本图像，浮动在它上面使它看起来像一块。我已经完美地对齐了，问题是我无法将链接显示在背景之上。代码如下：

<div id=Navigation>
    <div id="NavBar">
        <img src="Site Images/Navigation/Nav_BG.png"/>
    </div><!--Nav Bar -->
    <div id="NavLinks">
        <a href="x"><img src="" /><a>
        <a href="x"><img src="" /><a>
        <a href="x"><img src="" /><a>
        <a href="x"><img src="" /><a>
        <a href="x"><img src="" /><a>
        <a href="x"><img src="" /><a>
    </div><!-- End of Navlinks -->
</div><!-- End of Navigation Div -->

CSS

#Navigation {
    height: 810px;
    width: 350px;
    float: left;
}

#NavBar {
    position: absolute;
    z: 2; /* What is `z`? */
}

#NavLinks{
    float: none;
    z: 1; /* What is `z`? */
}

我尝试了z属性，但它无效。我知道有些事情是错的。 div id="Navigation"必须向左浮动，或者div id="content"（此处未添加）不会在其旁边。

Answer 1

在规则的css中交换z-index的值

#NavBar

和

#NavLinks

Answer 2

我想问题出在您使用的CSS属性z上。我可以找到关于此的任何内容，所以我猜你的意思是z-index。

尝试更改为以下CSS：

#Navigation {
    height: 810px;
    width: 350px;
    float: left;
}

#NavBar {
    position: absolute;
    z-index: 2 /* `z-index` instead of `z` */
}

#NavLinks{
    float: none;
    z-index: 1;
}

它应该给你预期的结果。

Answer 3

我会删除背景div并使用css设置背景：

HTML：

<div id="nav_links">
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
</div>

CSS：

#nav_links{
    background-image: url('path'); /*Put here the path to your background image*/
}

如果您添加有关问题的更多信息，我可以为您提供更好的建议。

将一个Div重叠到另一个Div上

3 个答案: