Html 我需要在保持内容位置的同时将这两个 div 堆叠在一起
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21344074/
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
I need to stack these two divs on top of each other while maintaining the content positions
提问by user3233834
I need to stack these two divs on top of each other but am having trouble finding a way to make it possible. I need to keep al the text inside in the same positions but need to be able to have the divs sit on top of one and other without setting absolute positions for them.
我需要将这两个 div 堆叠在一起，但找不到实现它的方法。我需要将所有文本保留在相同的位置，但需要能够让 div 位于一个和另一个之上，而无需为它们设置绝对位置。
Here is what I have...
这是我所拥有的...
<body>
<div style="position:relative;">
<div style="position:absolute">
<p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
<p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
</div>
</div>
<div style="position:relative;">
<div style="position:absolute">
<p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
<p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
</div>
</div>
</body>
回答by Peter
You should put the content of both your divs inside an outer div which has "position:relative", and put absolute positioning on your inner divs, and add a z-index to each of them. Then the larger z-index is placed over the smaller one.
您应该将两个 div 的内容放在具有“位置：相对”的外部 div 中，并在内部 div 上放置绝对定位，并为每个 div 添加一个 z-index。然后将较大的 z-index 放在较小的 z-index 上。
<body>
<div style="position:relative;">
<div style="position:absolute;z-index:0;">
<p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
<p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
</div>
<div style="position:absolute;z-index:1;">
<p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
<p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
</div>
</div>
</body>
回答by Hiigaran
Perhaps this simple example will help you:
也许这个简单的例子会帮助你：
<body>
<div class="one">
Content one
</div>
<div class="two">
Content two
</div>
</body>
CSS:
CSS：
.one{
color:red;
position:absolute;
left:0;
top:0;
z-index:2;
}
.two{
color:blue;
position:absolute;
left:0;
top:0;
z-index:1;
}
By positioning both divs absolutely, we can then use the left and top properties, set them to the same left and top positions (it can be in pixels, percent, etc), and then determine which one should be placed on top of the other by varying the z-index. The higher z-index numbered div will be the one on top, so the .one div will be on top and you will see more red than blue. Swap the values around so that .one has z-index:1 and .two has z-index:2, and you will see more blue (since those are the font colours).
通过绝对定位两个 div，然后我们可以使用 left 和 top 属性，将它们设置为相同的 left 和 top 位置（可以是像素、百分比等），然后确定应该将哪个放在另一个之上通过改变 z-index。z-index 编号较高的 div 将位于顶部，因此 .one div 将位于顶部，您将看到红色多于蓝色。交换周围的值，使 .one 具有 z-index:1 并且 .two 具有 z-index:2，您将看到更多的蓝色（因为这些是字体颜色）。
From here, you can put the rest of your content into the divs in my example.
从这里开始，您可以将其余内容放入我的示例中的 div 中。
回答by Rick S
You have a couple options:
您有几个选择：
- Use absolute postions on your divs. http://jsfiddle.net/sUyS3/1/
You could use negative margins on your second div.
<div style="margin-top: -25px;">
- 在您的 div 上使用绝对位置。 http://jsfiddle.net/sUyS3/1/
您可以在第二个 div 上使用负边距。
<div style="margin-top: -25px;">
