如何使两个 <div> 重叠？

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

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

使它们整齐重叠的最简洁/最优雅的方法是什么？该标志将有一个固定的高度和宽度，并将触摸页面的顶部边缘。

404961 次浏览
小开

使用绝对或相对定位，您可以进行各种重叠。你可能希望商标的样式是这样的:

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

注: 绝对位置有其偏心率。你可能需要做一些实验，但是做你想做的应该不会太难。

小开

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

#logo
{
position: absolute:
z-index: 2000;
left: 100px;
width: 100px;
height: 50px;
}
小开
最佳答案

我可能会这样处理(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>

小开

只要使用负边距，在第二个 div 中写道:

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

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

小开

如果你想让 logo 占据空间，你最好把它放在左边，然后用边距沿着内容向下移动，有点像这样:

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


#content {
margin: 10px 0 0 10px;
}

或者任何你想要的保证金。


提交答案