Question

我已尝试在此处找到的建议（使用负边距底部或使用位置：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和徽标图像移动得很好，但是图像被横幅隐藏在底部，即使我设置了一个高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 div嵌套在不同的元素集中，因此您的标记不允许#logo技巧发挥作用。

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

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

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

这将确保任何position:relative将与其余内容对齐。

编辑：

在审核您的代码之后，您需要更新CSS / HTML。

从left:15px; top:25px;和position:relative

#header

在#headerContent div之后，您需要添加另一个#wrap并在关闭<div class="container">元素的</div>之前关闭它。
将#wrap元素上的overflow:auto更改为overflow:hidden，以摆脱最右侧的滚动条。

将div叠加在另一个div上

1 个答案: