Html 你如何让两个 <div> 重叠？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/270493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How would you make two <div>s overlap?
提问by
I need two divs to look a bit like this:
我需要两个 div 看起来有点像这样：
| |
---| LOGO |------------------------
| |_______________| LINKS |
| CONTENT |
What's the neatest/most elegant way of making them overlap neatly? The logo will have a fixed height and width and will be touching the top edge of the page.
使它们整齐重叠的最简洁/最优雅的方式是什么？徽标将具有固定的高度和宽度，并将接触页面的顶部边缘。
采纳答案by Owen
I might approach it like so (CSS and HTML):
我可能会这样处理它（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>回答by TravisO
Just use negative margins, in the second div say:
只需使用负边距，在第二个 div 中说：
<div style="margin-top: -25px;">
And make sure to set the z-index property to get the layering you want.
并确保设置 z-index 属性以获得所需的分层。
回答by sblundy
With absolute or relative positioning, you can do all sorts of overlapping. You've probably want the logo to be styled as such:
通过绝对或相对定位，您可以进行各种重叠。您可能希望徽标的样式如下：
div#logo {
position: absolute;
left: 100px; // or whatever
}
Note: absolute position has its eccentricities. You'll probably have to experiment a little, but it shouldn't be too hard to do what you want.
注意：绝对位置有其偏心。您可能需要进行一些实验，但做您想做的事情应该不会太难。
回答by FlySwat
Using CSS, you set the logo div to position absolute, and set the z-order to be above the second div.
使用 CSS，您将徽标 div 设置为绝对位置，并将 z 顺序设置为高于第二个 div。
#logo
{
position: absolute:
z-index: 2000;
left: 100px;
width: 100px;
height: 50px;
}
回答by jishi
If you want the logo to take space, you are probably better of floating it left and then moving down the content using margin, sort of like this:
如果您希望徽标占用空间，则最好将其向左浮动，然后使用边距将内容向下移动，就像这样：
#logo {
float: left;
margin: 0 10px 10px 20px;
}
#content {
margin: 10px 0 0 10px;
}
or whatever margin you want.
或您想要的任何保证金。
