如何堆叠相对定位的div？答案

【问题标题】：How to stack relative positioned divs?如何堆叠相对定位的div？
【发布时间】：2012-01-15 04:55:12
【问题描述】：

我遇到了一个问题：我有一个div 标记和div 两侧各100 像素宽度的图像。现在我想添加一些 div tags 在中间堆叠在一起，它们必须是流动的（使用 % 宽度）并且相对于支持多种分辨率。我该怎么做？

JSFiddle Code

【问题讨论】：

负margins 和正z-indexes 应用于您要叠加的元素？另外，不要忘记您可以将带有position: absolute 的元素放在带有position: relative 的元素中，并且可以将其绝对放置在其父元素中，而不会影响其相对定位的兄弟元素的定位。
没有任何代码很难回答，但如果你想覆盖 div，它们应该是 position:absolute，每个左上角都不同
实际上我正在使用 margin-right:100px 和 margin-left:100px，如果我使用绝对值，我会得到不希望的效果，如果我使用相对定位，这些 div 实际使用的空间将是空白。
请用您的代码创建一个jsfiddle.net，无法想象您需要什么。
你想让其他 div 覆盖什么？你想让它们只覆盖中心 div 还是中心 div 和图像 div？

标签： html css

【解决方案1】：

类似this？你需要大量的空白空间才能让它们填满宽度......

编辑：

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

【讨论】：

我想要解决的问题仍然存在于您的回答中。如果我减小浏览器的宽度，中心 div 会位于正确图像的后面，而不是流动和调整。
不，它不会 - 至少如果我在的 jsfiddle.net/BXW8y/1 之间添加一些额外的空格@

【解决方案2】：

中心为position: relative 的唯一方法是知道中心div 的height 并调整正上方div 的margin-bottom。看看http://jsfiddle.net/XMkDt/10/（这只是一行，不是很有用）和http://jsfiddle.net/XMkDt/26/（这是等高的div，但可以适应不同的高度；注意：在我的FF win7上，边框正确对齐，但文本被调整了一个像素，我不知道为什么 - 但出于您的目的，它会起作用）。

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

【讨论】：

很好的答案，我不知道高度是把相对放在相对中所需要的
嗯，它不只是高度，它知道这样你就可以用底部边距偏移正确的距离。
由于relative将元素的空间保留在原始位置，不会改变以下div的位置吗？？
不，因为 div 没有相对于自身移动（就像你做top: -100px 或类似的那样）这留下了元素“流入”的“间隙”。通过仅使用负边距，它会将整个相对元素作为一个单元移动（div 可能是 static 并且它的功能相同，但您最有可能需要 relative，因此您可以在元素）。
感谢您的回答，但请您告诉-222px值是在什么基础上确定的，一定会清除我的概念。