將 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

由於您的#logo div 嵌套在一組不同的元素中，因此您的標記將不允許margin-bottom技巧起作用。

您必須絕對 position 徽標並將其相對於包含#logo div 和.banner div 的父元素放置。

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

這是使用position:absolute的示例。 在示例中，我沒有在父元素上使用position:relative ，但如果您使用的是網格系統，我會檢查以確保主.row或.container-(12||16)具有position:relative屬性放。

這將確保任何left:15px; top:25px; left:15px; top:25px; 將以 rest 為中心的內容。

編輯：

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

1. 從#header和#headerContent中刪除所有對position:relative的引用
2. 在您的#wrap div 之后，您需要添加另一個<div class="container">並在關閉#wrap元素的</div>之前將其關閉。
3. 將您的#headerContent元素上的overflow:auto更改為overflow:hidden ，以消除最右側的滾動條。