3 <div> => 中间<div> 重叠上下<div>

【问题标题】：3 <div> => middle <div> overlaps upper and lower <div>3 <div> => 中间<div> 重叠上下<div>
【发布时间】：2011-09-21 13:53:00
【问题描述】：

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

我试过了：

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

但那只有上重叠下的效果<div>...

【问题讨论】：

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案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 }

【讨论】：