如何让两个< div>重叠？ [英] How would you make two <div>s overlap?

问题描述

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

I need two divs to look a bit like this:

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

什么是最整洁/最优雅的方式使它们重叠整齐？

What's the neatest/most elegant way of making them overlap neatly? The logo will have a fixed height and width and will be touching the top edge of the page.

推荐答案

我可能会接近它的顶部边缘。 （CSS和HTML）：

I might approach it like so (CSS and 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>重叠？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！