你如何使兩個 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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。