將一個div元素放在另一個元素上方

在下面的圖片中，我想將浮木/炸彈圖像放在圖像正上方，因此，我想刪除/摺疊這兩個div之間的「空間」。然而，這個差距並不是由標記本身造成的，因爲正如你所看到的，「炸彈」正在使得圖像的高度變大。將一個div元素放在另一個元素上方

enter image description here

我想定位在「頭」（因此導航的棕色頂部只是頭底部之下）導航欄，所以該間隙消失。這些圖像意味着重疊。

我認爲這可以使用CSS來完成。但是如何？無論哪種解決方案需要跨瀏覽器工作。

HTML：

<header></header> 
<nav></nav>

CSS：

header { 
    width: 980px; 
    height: 327px; 
    background: url(../images/header.png); 
} 

nav { 
    width: 980px; 
    height: 180px; 
    background: url(../images/menu.png); 
}

來源

2012-02-26 John Svensson

您可以發佈您的HTML代碼..或嘗試添加浮動：左到兩個 – Mukesh 2012-02-26 12:18:07

也許陰性切緣？

header { 
    width: 980px; 
    height: 327px; 
    background: url(../images/header.png); 
} 

nav { 
    width: 980px; 
    height: 180px; 
    background: url(../images/menu.png); 
    margin: -90px auto 0; 
}

http://jsfiddle.net/NmUfT/

來源

2012-02-26 12:19:34

相對定位可以解決這個給你：

nav { 
    position: relative; 
    top: -20px; 
}

來源

2012-02-26 12:20:24

這也適用：http://jsfiddle.net/NmUfT/1/ – 2012-02-26 12:22:23

我才意識到，這是把一個空間與'nav'下的'top'大小相同：http://jsfiddle.net/NmUfT/2/請參閱：http://stackoverflow.com/a/2280941/451969 – 2012-02-26 12:38:38

頂利潤率爲負值的確是你尋求。如果導航欄會在標題下消失，則應該更改導航的z-index。嘗試不同的數字：100，1000，10000等。

來源

2012-02-26 12:24:49

將div放在標題div內。

nav { 
    position: relative; 
    bottom: -30px; 
    }

來源

2012-02-26 12:29:11 Odee

將一個div元素放在另一個元素上方

回答

相關問題