如何堆栈相对定位的div？

我面临一个问题：我在div两侧各有一个div标签和100px宽度的图像。现在我想添加一些div，在它的中间相互堆叠，它们必须是流体（使用％宽度），并且相对于支持多个分辨率。我该怎么做？如何堆栈相对定位的div？

2011-12-07 deXter

对您要叠加的元素应用负边距和正Z指数？另外，不要忘记，你可以在'element：relative'中放置一个带有'position：absolute'元素的元素，它可以完全放在它的父元素中，而不会影响其相对位置的兄弟元素的位置。 – Aaron

难以回答没有任何代码，但如果你想覆盖divs他们应该是位置：绝对与不同的左上角为每个 – Yisela

其实我使用margin-right：100px和margin-left：100px，如果我使用绝对我得到不受欢迎的效果，如果我使用相对定位，那些div实际使用的空间将为空白。 – deXter

要做到这一点，唯一的办法中心position: relative是通过知道中心divs的height和调整margin-bottom紧接上面的div。看看http://jsfiddle.net/XMkDt/10/（这只是一条线，不是很有用）和http://jsfiddle.net/XMkDt/26/（这是相同的高度divs，但可以适应不同的高度;注意：在我的FF win7上，边框的对齐方式正确，但是文本被调整了一个像素，我不知道为什么 - 但为了您的目的，它会工作）。

注意：您需要确保z-index: 1已设置为您当时实际显示的div（因为您进行不透明度更改），将其提升到其他div的上方。

来源

2011-12-07 18:01:39 ScottS

好的答案之间添加一些额外的空间，我不知道身高是所有它把所有相关在相对的 – Yisela

嗯，它不只是高度，它的知道，所以你可以抵消它与底部边距的正确距离。 – ScottS

由于相对保持元素在原始位置的空间，不会改变以下div的位置？ – deXter

喜欢的东西this？你需要大量的空的空间，虽然让他们填写宽度的地狱......

编辑：

流体宽度的新小提琴：http://jsfiddle.net/BXW8y/1/

来源

2011-12-07 17:58:34 ptriek

我想要的解决方案的问题仍然存在于您的答案中。如果我减少浏览器的宽度，则中心div会在正确的图像后面显示，而不是在流动和调整。 – deXter

不，它不 - 至少不是如果我在的http://jsfiddle.net/BXW8y/1/ – ptriek

如何堆栈相对定位的div？

回答

相关问题