CSS 中的重叠元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2027657/
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
Overlapping elements in CSS
提问by AJ.
How can I make two elements overlap in CSS, e.g.
如何使 CSS 中的两个元素重叠，例如
<div>Content 1</div>
<div>Content 2</div>
I would like the two contents (they can be anything) to overlap, so Content 2 is displayed starting at the same top left corner as Content 1 and they appear overlapped. Content 1 should begin in the normal flow of the document and not at some fixed position on the screen.
我希望两个内容（它们可以是任何内容）重叠，因此内容 2 从与内容 1 相同的左上角开始显示，并且它们看起来重叠。内容 1 应该从文档的正常流程开始，而不是在屏幕上的某个固定位置。
Is this possible?
这可能吗？
Thanks,
谢谢，
AJ
AJ
回答by fearofawhackplanet
the easiest way is to use position:absoluteon both elements. You can absolutely position relative to the page, or you can absolutely position relative to a container div by setting the container div to position:relative
最简单的方法是position:absolute在两个元素上使用。您可以相对于页面进行绝对定位，也可以通过将容器 div 设置为相对于容器 div 进行绝对定位position:relative
<div id="container" style="position:relative;">
<div id="div1" style="position:absolute; top:0; left:0;"></div>
<div id="div2" style="position:absolute; top:0; left:0;"></div>
</div>
回答by James
I think you could get away with using relative positioning and then set the top/left positioning of the second DIV until you have it in the position desired.
我认为您可以使用相对定位，然后设置第二个 DIV 的顶部/左侧定位，直到将其置于所需的位置。
回答by Trent
You can use relative positioning to overlap your elements. However, the space they would normally occupy will still be reserved for the element:
您可以使用相对定位来重叠元素。但是，它们通常占用的空间仍将保留给元素：
<div style="background-color:#f00;width:200px;height:100px;">
DEFAULT POSITIONED
</div>
<div style="background-color:#0f0;width:200px;height:100px;position:relative;top:-50px;left:50px;">
RELATIVE POSITIONED
</div>
<div style="background-color:#00f;width:200px;height:100px;">
DEFAULT POSITIONED
</div>
In the example above, there will be a block of white space between the two 'DEFAULT POSITIONED' elements. This is caused, because the 'RELATIVE POSITIONED' element still has it's space reserved.
在上面的示例中，两个“DEFAULT POSITIONED”元素之间将有一块空白。这是因为 'RELATIVE POSITIONED' 元素仍然保留了它的空间。
If you use absolute positioning, your elements will not have any space reserved, so your element will actually overlap, without breaking your document:
如果您使用绝对定位，您的元素将不会保留任何空间，因此您的元素实际上会重叠，而不会破坏您的文档：
<div style="background-color:#f00;width:200px;height:100px;">
DEFAULT POSITIONED
</div>
<div style="background-color:#0f0;width:200px;height:100px;position:absolute;top:50px;left:50px;">
ABSOLUTE POSITIONED
</div>
<div style="background-color:#00f;width:200px;height:100px;">
DEFAULT POSITIONED
</div>
Finally, you can control which elements are on top of the others by using z-index:
最后，您可以使用 z-index 控制哪些元素位于其他元素之上：
<div style="z-index:10;background-color:#f00;width:200px;height:100px;">
DEFAULT POSITIONED
</div>
<div style="z-index:5;background-color:#0f0;width:200px;height:100px;position:absolute;top:50px;left:50px;">
ABSOLUTE POSITIONED
</div>
<div style="z-index:0;background-color:#00f;width:200px;height:100px;">
DEFAULT POSITIONED
</div>
回答by Anshik gupta
You can try using the transform: translate property by passing the appropriate values inside the parenthesis using the inspect element in Google chrome.
您可以尝试使用transform: translate 属性，方法是使用Google chrome 中的inspect 元素在括号内传递适当的值。
You have to set translate property in such way that both the <div>overlap each other then You can use JavaScript to show and hide both the <div>according to your requirements
您必须以<div>相互重叠的方式设置翻译属性，然后您可以使用 JavaScript<div>根据您的要求显示和隐藏两者
