3 <div> =＆gt; middle <div>重叠上下<div> </div> </div> </div>

Question

如何重叠3 <div>，以便中间<div>位于其他两个之上。

我试过了：

#middle { 
  margin-top: -10px;
  margin-bottom: -10px;
}

但这只会影响上层而不是下层<div> ...

Answer 1

你需要使用css position 检查工作代码@ jsfiddle

Answer 2

使用position：absolute将中间div从布局中取出。

<div id="upper">Upper content</div>
<div id="middle">Middle content</div>
<div id="lower">Lower Content</div>

div { width:180px;height:100px;border:3px solid #000; }
#upper { border-color:#FF0; }
#middle { position:absolute;top:100px;border-color:F00; }
#lower { margin-top:80px;border-color:#0F0 }