如何使两个<div>重叠？

Question

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

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

什么是使它们很好地重叠的最优雅/最美观的方法？标志将具有固定的高度和宽度，并将接触页面的顶缘。

- st elmos fire

Answer 1

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

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

同时确保设置 z-index 属性以获得所需的层叠效果。

- TravisO

---

这绝对是最简单的方法，通过在页面内容上使用 margin-bottom，可以轻松地适应重叠页脚。谢谢！ - Peter DeWeese

这个解决方案似乎依赖于 DOCTYPE，不是吗？ 因为当我尝试使用 HTML5 DOCTYPE 时它没有起作用。 - alumi

这应该是被接受的答案，绝对定位往往会引起问题。 - Dmitriy

不设置元素的position属性为static以外的值是无法使用z-index属性的。不幸的是，这种方法不能让您选择z轴顺序。 - Hugo Delannoy

这是最简单和干净的解决方案。喜欢它 :) - Alston

Answer 2

我可以这样处理（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>

- Owen

---

有没有办法使内容避开徽标使用的空间？ - Javier

嗯，你能澄清一下吗？我理解你的意思是你只想要标志放在内容上面？如果是这样的话，那就是普通的 div 流程（所以从 #logo 中删除 left、top、position）。不过我有一种感觉，你可能指的是其他的东西！ :) - Owen

我认为原意是让内容（文本）环绕标志。 - Davy8

啊，嗯，我很确定不是这个问题。问题在于一个元素可以浮动或定位，但不能同时进行。除非他们开发出某种浮动居中的想法... - Owen

Answer 3

通过绝对或相对定位，您可以进行各种重叠。您可能希望将标志设计成如下样式:

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

注意：绝对定位有其特殊性。您可能需要进行一些实验，但应该不难做到您想要的效果。

- sblundy

---

这会导致标志重叠在链接文本上吗？还是会将链接推到一边？ - Jay Mooney

不，absolute会有效地从流中删除标签。就好像它不存在一样。 - sblundy

Answer 4

使用CSS，您可以将logo div设置为绝对定位，并将z-order设置为高于第二个div。

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

- Jonathan Holland

Answer 5

如果您想让标志占据空间，最好将其向左浮动，然后使用边距向下移动内容，就像这样：

#logo {
    float: left;
    margin: 0 10px 10px 20px;
}
#content {
    margin: 10px 0 0 10px;
}

或者您想要的任何边距。

- jishi