div的重叠答案

【问题标题】：Div's overlappingdiv的重叠
【发布时间】：2010-09-20 06:30:32
【问题描述】：

我有一个 div 对列表：MainDiv 和 infPanel Div。我需要将 infPanel div 放在 MainDiv 上并消除 MainDiv 之间的距离。我看到的最好的决定是在 MainDiv 中使用background 选项设置图像，然后将 infPanel 放在 MainDiv 中，但由于一些技术要求，最好仅通过标签发布图像。

另一种解决方案是使用position: absolute;并用JS为每个infPanel设置位置，但最好消除JS。

您能否提出更“敏捷”的解决方案？谢谢。

【问题讨论】：

标签： css layout html

【解决方案1】：

您可以使用带有负值的margin。

例如，

element{margin-top:-100px;}

将元素“移动”到顶部 100 像素，与其他元素重叠。

请注意，如果您需要指定 z-index 来重新排序元素，带有负值的 margin-top 也适用于 position:absolute;。这意味着不是为每个元素指定top 和left，而是根据元素的实际位置将元素“移动”到顶部（而top 和left 根据页面固定位置)。

【讨论】：

infPanel出现在Main div和z-index下的问题没有帮助（（
@andrii: 是否可以在 HTML 中重新排序元素？将元素按正确的 z 顺序放置就足够了。如果您不能这样做，请查看我的答案的编辑。

【解决方案2】：

如果你只想要MainDiv底部的InfPanel，你根本不需要JS，你可以用CSS来做：

.MainPanel {
  position: relative;
}

.InfPanel {
  position: absolute;
  bottom: 0;
}

【讨论】：

这样的div组很多的问题(.
这些div的高度是固定的吗？