您将如何使两个<div>重叠？

154

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

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

使它们整齐重叠的最巧妙/最优雅的方法是什么？徽标将具有固定的高度和宽度，并将接触页面的顶部边缘。

css html overlap

88

我可能会这样处理（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="https://via.placeholder.com/200x100" />
</div>
<div id="content">
  
  <div id="links">dssdfsdfsdfsdf</div>
</div>

展开摘要

— 欧文
source

2

有什么方法可以使内容仅避免徽标占用的空间？

— 哈维尔

1

嗯，你能澄清一下吗？我认为您只想在内容上方加上徽标？如果是这样，那只是div的正常流程（因此请从#logo中删除左侧，顶部，位置）。我有一种感觉，尽管你的意思是别的！:)

— Owen

2

我认为这是要在徽标周围包裹内容（文本）

— Davy8

2

嗯，我敢肯定不会。问题是元素可以浮动或定位，但不能同时浮动。直到他们发展出某种浮动：中心思想……

— Owen

88

只需使用负边距，在第二个div中说：

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

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

— 特拉维斯
source

9

这是迄今为止最简单的方法，并且可以通过在页面内容上使用页边距底部来轻松地将页脚重叠。谢谢！

— Peter DeWeese 2012年

1

该解决方案似乎取决于DOCTYPE，不是吗？因为我尝试时它不适用于HTML5 DOCTYPE。

— alumi

2

这应该是公认的答案，绝对位置容易引起问题。

— 德米特里（Dmitriy）'18

5

通过绝对或相对定位，您可以进行各种重叠。您可能希望徽标的样式如下：

div#logo {
  position: absolute;
  left: 100px; // or whatever
}

注意：绝对位置有其偏心率。您可能需要进行一些尝试，但是要做您想要的事并不难。

— bl
source

1

这样会使徽标与链接所在的文本重叠吗？还是会将链接推到一边？

1

不，绝对有效地从流程中删除标签。好像它不在那儿。

— sblundy

2

使用CSS，将徽标div设置为绝对位置，并将z顺序设置为第二个div上方。

#logo
{
    position: absolute:
    z-index: 2000;
    left: 100px;
    width: 100px;
    height: 50px;
}

— 飞特警
source

1

如果希望徽标占据空间，最好将其向左浮动，然后使用边距向下移动内容，如下所示：

＃商标 {
    向左飘浮;
    边距：0 10px 10px 20px;
}

#content {
    边距：10px 0 0 10px;
}

或任何您想要的保证金。

— 吉士
source