将 div 覆盖在另一个 div 上

Question

我尝试了在这里找到的建议（使用负边距底部或使用 position: aboslute）将 div 覆盖在另一个 div 上，并且在其他情况下效果很好。但由于某些原因，它现在无法正常工作。

这是我的html：

       <div id="header" class="lightgradient">

            <div id="headerContent" class="container">

                <div id="logo" class="span-6">

                    <a href="/">

                        <img src="/images/logo.png" width="230" height="62" />

                    </a>

                </div>

                <div id="menucontainer" class="span-14"><ul id="menu"><li>

<a href='/Services/Index'>TJ&#196;NSTER</a></li>

<li>

<a href='/About/References'>KUNDER</a></li>

<li>

<a href='/About'>OM OSS</a></li>

<li>

<a href='/About/Contact'>KONTAKT</a></li>

</ul></div>

                <div id="logindisplay" class="span-2">

                        <a href="/Account/LogOn">Logga in</a>



                </div>

            </div>

        </div>



    <div class="banner">

        <div class="container white">

            <div class="span-12">
[etc...]

我希望徽标突出在“横幅”上方。

我试过这个，例如：

#logo
{
    float: left;
    height: 70px;
    padding: 10px 10px 0px 10px;
    position: relative;
    margin-bottom: -40px;
    z-index: 40;
}

但这行不通。它可以很好地移动 div 和 logo 图像，但图像被横幅隐藏在底部，即使我设置了高 z-index，而且我在 div 内获得了一个包含徽标的滚动条......

如何使图像位于横幅顶部，以及如何摆脱滚动条？

编辑：

这也是横幅 css：

.banner
{
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#70b8ea', endColorstr='#2c6dc3'); 
    background: -webkit-gradient(linear, left top, left bottom, from(#70b8ea), to(#2c6dc3)); 
    background: -moz-linear-gradient(top,  #70b8ea,  #2c6dc3);
    border-bottom:2px solid #fff;
    border-top: 1px solid white;
    padding: 20px;
}

Answer 1

您的标记不允许 margin-bottom 技巧起作用，因为您的 #logo div 嵌套在一组不同的元素中。

您必须绝对定位徽标并将其相对于包含#logo div 和.banner div 的父元素放置。

http://jsfiddle.net/DOSBeats/NXgq6/

这是使用position:absolute 的示例。在示例中，我没有在父元素上使用position:relative，但如果您使用的是网格系统，我会检查以确保主.row 或.container-(12||16) 具有position:relative 属性集。

这将确保任何left:15px; top:25px; 将与其余内容居中。

编辑：

在这里查看您的代码后，您需要更新您的 CSS/HTML。

1. 从#header 和#headerContent 中删除所有对position:relative 的引用
2. 在您的 #wrap div 之后，您需要添加另一个 <div class="container"> 并在关闭 #wrap 元素的 </div> 之前将其关闭。
3. 将#headerContent 元素上的overflow:auto 更改为overflow:hidden，以消除最右侧的滚动条。