Css 您将如何制作两个<；部门>；什么是重叠？

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

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

---

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

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

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

---

注：绝对位置有其偏心度。你可能需要做一点实验，但做你想做的事情应该不会太难

使用CSS，可以将logo div设置为position absolute，并将z顺序设置为高于第二个div

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

---

我可能会这样做（CSS和HTML）：

html，
身体{
边际：0px；
}
#标志{
位置：绝对；/*从自然布局中重新定位徽标*/
左：75px；
顶部：0px；
宽度：300px；
高度：200px；
z指数：2；
}
#内容{
页边顶部：100px；/*为徽标提供缓冲区*/
}
#链接{
高度：75px；
左边距：400px；/*齐平链接（带有25px“填充”）位于徽标右侧*/
}

DssDfsDfsDfsDfsDfsDf

只需使用负边距，在第二部分中说：

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

---

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

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

#logo { float: left; margin: 0 10px 10px 20px; } #content { margin: 10px 0 0 10px; } #标志{ 浮动：左； 利润率：0 10px 10px 20px； } #内容{ 利润率：10px 0 10px； }

---

或者您想要的任何边距。

这会导致徽标与链接所在的文本重叠吗？或者它会将链接推到一边？不，绝对有效地从流中移除标签。这就好像它不存在一样。有没有办法让内容避开徽标使用的空间？嗯，你能澄清一下吗？我认为这意味着你只想在内容上方添加徽标？如果是这样的话，这只是一个正常的div流（因此从#logo中删除左、上、位置）。我有一种感觉，你是指别的东西！：）我想我们的意思是让内容（文本）围绕着logo，嗯，我很确定不是。作为一个元素的问题可以是浮动的，也可以是定位的，但不能两者兼而有之。直到他们开发出某种浮动：居中的想法……这是迄今为止最简单的方法，并且可以通过在页面内容上使用页脚边距底部来轻松地适应重叠的页脚。谢谢这个解决方案似乎依赖于DOCTYPE，不是吗？因为我尝试使用HTML5 DOCTYPE时它不起作用。这应该是公认的答案，绝对位置往往会导致问题。如果不将位置设置为与静态不同的值，则不可能使用z索引。不幸的是，这个答案不允许您选择z顺序。