css - 你怎么做两个重叠？

Question

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

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

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

Answer 1

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

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

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

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>

Answer 3

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

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

注：绝对位置有其偏心率。您可能需要进行一些实验，但做您想做的事情应该不会太难。

Answer 4

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

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

Answer 5

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

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

＃内容 {
    边距：10px 0 0 10px；
}

或您想要的任何保证金。