你将如何使两个<div>重叠？

我需要两个div来看起来有点像这样：

| | ---| LOGO |------------------------ | |_______________| LINKS | | CONTENT | 

什么是使它们重叠整齐的最好/最优雅的方式？ 徽标将具有固定的高度和宽度，并将触摸页面的顶部边缘。

Answer 1

我可能会这样（CSS和HTML）：

 html, body { margin: 0px; } #logo { position: absolute; // Reposition logo from the natural layout left: 75px; top: 0px; width: 300px; height: 200px; z-index: 2; } #content { margin-top: 100px; // Provide buffer for logo } #links { height: 75px; margin-left: 400px; // Flush links (with a 25px "padding") right of logo } 

 <div id="logo"> <img src="http://www.skrenta.comhttp://img.dovov.comstackoverflow.jpg" /> </div> <div id="content"> <div id="links">dssdfsdfsdfsdf</div> </div> 

Answer 2

只需使用负边距，在第二个div中说：

 <div style="margin-top: -25px;"> 

并确保设置z-index属性以获得所需的分层。

Answer 3

绝对或相对定位，你可以做各种重叠。 你可能希望标志的样式如下：

 div#logo { position: absolute; left: 100px; // or whatever } 

注意：绝对位置有其偏心。 你可能不得不做一点实验，但是做你想做的事情不应该太难。

Answer 4

使用CSS，您将徽标div设置为绝对位置，并将z顺序设置为高于第二个div。

 #logo { position: absolute: z-index: 2000; left: 100px; width: 100px; height: 50px; } 

Answer 5

如果你想要标志占据空间，你可能更好的浮动左边，然后使用保证金下移内容，有点像这样：

 ＃商标 {
    向左飘浮;
     margin：0 10px 10px 20px;
 }

 #content {
     margin：10px 0 0 10px;
 }

或者你想要的任何保证金。