你如何使两个 div 重叠？

问题描述

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

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

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

最佳解决方案

我可能会这样接受 (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.com/images/stackoverflow.jpg" />
</div>
<div id="content">

  <div id="links">dssdfsdfsdfsdf</div>
</div>

次佳解决方案

只是使用负边际，在第二个 div 说：

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

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

参考文献

• How would you make two <div>s overlap?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。