Divs Overlap 简单实现答案

【问题标题】：Divs Overlay Simple ImplemantationDivs Overlap 简单实现
【发布时间】：2011-12-28 23:20:06
【问题描述】：

我有一个 div（id=placeholder），它位于一个表格单元格中，它有三个嵌套的 div（content1、content2 和 content3）。我希望这些嵌套的 div 与它们的父级（id=placeholder）具有相同的大小并相互覆盖。

实现这一目标的最简单方法是什么？我正在寻找一个跨浏览器的解决方案。

HTML

<table><tr><td>

<div id='placeholder'>
  <div id='content1' class='overlay'>...</div>
  <div id='content2' class='overlay'>...</div>
  <div id='content3' class='overlay'>...</div>
<div>

</td></tr></table>

【问题讨论】：

标签： html css

【解决方案1】：

css

.overlay { position: absolute; }

html

<div id='placeholder'>
  <div id='content1' class='overlay'>...</div>
  <div id='content2' class='overlay'>...</div>
  <div id='content3' class='overlay'>...</div>
<div>

您需要在单元格内clearfix 以按高度拉伸表格单元格。

代码：http://jsfiddle.net/v6Jnr/

更新：添加跨浏览器clearfix

代码：http://jsfiddle.net/v6Jnr/2/

【讨论】：

您想在#placeholder 上添加position:relative 以确保嵌套的div 不会突破到其他元素吗？还是在这种情况下没有必要？
是的，你需要position:relative，否则你的绝对定位将默认在浏览器窗口的左上角。
@Samich 我的 Html 比我发布的要复杂一些 - 由于某种原因， content2 显示在 content1 下方，而不是覆盖它。你知道问题出在哪里吗？
尝试更改 z-index。而且您不需要相对定位的父级，只要您不定位叠加层（顶部，左侧，...）。