Question

您好我目前正在一个网站上工作，我希望该商家的徽标与内容重叠。

与此网站类似：http://www.menzies.com.au/

我不确定如何处理这个问题，我尝试使用负边距和z-index，但它只是觉得错误的做法

我尝试过的示例代码

<div class="container">
    <ul class="nav nav-pills">
        <img src="logo.jpg" style="float: left; z-index: 3;">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Home</a></li>
    </ul>
    <img src="http://all4desktop.com/data_images/original/4172874-nordic-landscapes.jpg" style="z-index: -1; margin-top: -50px;">
</div>

发生的是第二张图片与徽标图片重叠。这也只是一种解决问题的笨重方式，因为除非绝对必要，否则我从未见过人们主张使用负保证金

任何有经验的人都可以指出我正确的方向吗？

Answer 1

基本上你需要做的是将徽标位置设置为absolute，然后它将覆盖其他元素。我给你做了一个例子，看看这个HTML：

<div id="menu">
    <div class="logo"></div>
    <nav>
        <ul>
            <li>Home</li>
            <li>Contact</li>
        </ul>
    </nav>
</div>

menu div有75px的高度，但他的孩子可以拥有更多，如果他们这样做，会发生溢出，这就是你想要的。如果没有发生，正如我所说，你可以尝试将位置设置为absolute。因此，您将logo div设置为高度为130px，高度为nav至100％。我将logo的高度更改为130px，但它不会影响其他菜单子项。因此，nav高度将为menu高度：75px。完整代码：

#menu {
    width:100%;
    height:75px;
    background-color:#333;
}

ul {
    list-style:none;
}

ul li {
    display:inline-block;
}

.logo {
    width:150px;
    height:130px;
    background-image:url('http://placehold.it/150x130');
    float:left;
    position:absolute;
    margin-left:25px;
}

nav {
    color:#fff;
    float:right;
    font-size:1.3em;
    line-height:75px;
    margin-right:10px;
    height:100%;
}

nav ul {
    margin-top: 0px;
}

nav ul li {
    margin-right:10px;
}

<div id="menu">
    <div class="logo"></div>
    <nav>
        <ul>
            <li>Home</li>
            <li>Contact</li>
        </ul>
    </nav>
</div>

这个问题是非常相对的，但是像这样一个简单的CSS，你可以勾画它。

徽标图像溢出到内容中

1 个答案: