html - Logo 图像溢出到内容中

Question

您好，我目前正在开发一个网站，我希望将公司 Logo 重叠到内容中。

类似于此网站: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>

发生的情况是第二个图像与 Logo 图像重叠。这也感觉是一种笨拙的解决问题的方法，因为我从未见过人们提倡使用负边距，除非绝对必要

有这方面经验的人能给我指出正确的方向吗？

Answer 1

基本上，您需要做的就是将 Logo 位置设置为绝对，然后它将位于其他元素之上。我给你做了一个例子，看看这个 HTML:

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

menu div 的高度为 75px，但他的 child 可以有比这个更多的高度，如果他们这样做，就会发生溢出，这就是你想要的。如果没有发生，正如我所说，您可以尝试将位置设置为absolute。因此，您将 logo div 设置为 130px 高度，并将 nav 设置为 100% 高度。我将 logo 的高度更改为 130px，但它不会影响其他菜单子(monad)项。因此，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，您就可以解决这个问题。