Html CSS：使两个浮动元素重叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9227007/
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
CSS: Make two floating elements overlap
提问by Chris
I have two divs within a container. One floats left and one floats right. Both are about 60% as wide as the container and are designed such that they overlap in the middle (right div takes priority).
我在一个容器中有两个 div。一只向左漂浮，一只向右漂浮。两者都大约是容器的 60% 宽，并且设计为它们在中间重叠（右侧 div 优先）。
How do I get them to overlap rather than stack vertically like floating elements usually do? If I absoultely position the right element the containing div doesn't expand to fit the content.
我如何让它们重叠而不是像浮动元素通常那样垂直堆叠？如果我绝对定位正确的元素，则包含的 div 不会扩展以适应内容。
Code (unfortunately I cannot jsfiddle this as their servers are read only atm):
代码（不幸的是我不能 jsfiddle 这个因为他们的服务器是只读的 atm）：
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: right;
}
回答by Gareth
Use a negative margin-righton the left box so that the right box is allowed to overlap:
margin-right在左框上使用负数，以便允许右框重叠：
#left {
width: 250px;
border: 1px solid #ccc;
display: inline;
float: left;
margin-right:-104px;
}
The 104 pixels is the overlap amount plus 4px for borders.
104 像素是重叠量加上边框的 4 像素。
Here's a jsfiddle.
这是一个jsfiddle。
回答by thenetimp
You can only do that with positioning.
你只能通过定位来做到这一点。
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#right {
width: 250px;
border: 1px solid #ccc;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
回答by R Reveley
Can you add an extra div in there?
你能在那里添加一个额外的div吗？
<div id="container">
<div id="left">
<div id="left-inner">left</div>
</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
}
#left {
float: left;
width: 0px;
overflow:visible;
}
#left-inner {
float: right;
width: 250px;
}
#right {
width: 250px;
}
</style>
回答by T.Todua
Excellent Solution: http://jsfiddle.net/A9Ap7/237/
优秀的解决方案：http: //jsfiddle.net/A9Ap7/237/
So, dont use:
所以，不要使用：
MARGIN-LEFT:100px...
==
or similar commands.
The problem is that, if the left elements size is changed, if window is resized or etc,,, then it will make you problems!
so, dont use such custom dirty "tricks", but make a normal structure inside html, so they should be naturally ordered.
== 或类似的命令。
问题是，如果改变了左边元素的大小，如果调整了窗口大小等等，那么它会给你带来问题！所以，不要使用这种自定义的肮脏“技巧”，而是在html内部制作一个正常的结构，所以它们应该自然排序。
回答by zozo
Make container bigger so both fit. Then use position relative and left: -100px or whatever on the one on the right.
使容器更大，以便两者都适合。然后使用 position relative 和 left: -100px 或右侧的任何内容。
回答by Stelian Matei
You could create the divs with absolute position and add a positive z-index to the one you want to be in front.
您可以创建具有绝对位置的 div，并将正 z-index 添加到您想要在前面的那个。
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
width: 400px;
background-color: #eee;
position: relative;
}
#left {
width: 250px;
border: 1px solid #ccc;
display: block;
position: absolute;
top: 0px;
left: 0px;
}
#right {
width: 250px;
border: 1px solid #ccc;
display: inline;
position: absolute;
top: 0px;
right: 0px;
z-index: 1;
}
回答by Boris
Try this one:
试试这个：
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
<style>
#container {
width: 400px;
background-color: #eee;
}
#left {
width: 250px;
border: 1px solid #ccc;
float: left;
}
#right {
width: 250px;
border: 1px solid #ccc;
margin-left: 150px;
position: absolute;
}
</style>
回答by ZX12R
How about pulling the right div with negative margin. Something like this?
如何以负边距拉动正确的 div。像这样的东西？
<div id="container">
<div id="left">left</div>
<div id="right">right</div>
</div>
#container {
position: relative;
width: 400px;
height: 110px;
background-color: #eee;
}
#left {
width: 250px;
height: 100px;
border: 1px solid green;
float: left;
}
#right {
position: relative;
float: right;
width: 250px;
height: 100px;
top: -100px;
border: 1px solid red;
}
