Html 重叠的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3090289/
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 divs
提问by Chaitanya
I require 2 overlapping divs, which look like the one below.
我需要 2 个重叠的 div，如下所示。
------------------------------------
| | |
| ------------------ | |
| ' '| |
| ' '| |
| ' '| |
| ' '| |
| ' '| |
| ' '| |
| ' '| |
| --------------------| |
| ' '| |
| ' '| |
| -------------------| |
| | |
| | |
------------------------------------
But somehow am unable to get it. here is the place am fiddling outCan anyone tell me where am I going wrong.
但不知何故我无法得到它。这是我摆弄的地方谁能告诉我我哪里出错了。
Edit 1:I have a left div and a right div. The left div has the overlapping div. Right div is a normal div. I guess most of you are confused and thing the right div to be the overlapping one, there are 2 divs in the left div i need those to overlap.
编辑 1：我有一个左 div 和一个右 div。左边的 div 有重叠的 div。右边的div是一个普通的div。我想你们中的大多数人都很困惑，正确的 div 是重叠的，左边的 div 中有 2 个 div，我需要它们重叠。
Sorry to confuse you all.
很抱歉给大家带来困惑。
回答by Ben Rowe
I think you want something like this:
我想你想要这样的东西：
html
html
<div class="parent">
<div class="a"></div>
<div class="b"></div>
</div>
css
css
.parent {
position: relative;
}
.a {
position: absolute;
width: 100px;
height: 100px;
z-index: 100;
background: red;
}
.b {
position: absolute;
width: 80px;
height: 180px;
z-index: 110;
left: 10px;
background: blue;
top: 10px;
}
Edit: in your case parent = contentContainer, a/b = leftContainer/rightContainer
编辑：在你的情况下 parent = contentContainer, a/b = leftContainer/rightContainer
回答by Cary Chow
I have changed like this:
我变了这样：
#rightContainer {
/*float:right ;*/
width:20%;
/*margin:0px;*/
margin-top: 30px;
margin-left: 30px;
padding:0px;
position:relative;
background-color:Lime;
}
You may change the "30px" as you like. I have tested in FireFox only.
您可以根据需要更改“30px”。我只在 FireFox 中测试过。
回答by Sarfraz
You will have to use top, leftand z-indexproperties for that.
为此top，您必须使用,left和z-index属性。
回答by Angel.King.47
Im not really sure how to use the z-index
我不太确定如何使用 z-index
But i think this might help in the style tag
但我认为这可能有助于样式标签
margin:-50px -50px 0px 0px;
the minus property works, how well it does should be all about testing
减号属性有效，它的效果应该是关于测试的
