CSS：如何使 div 块 * 不 * 在其父容器中占用空间答案

【问题标题】：CSS: How to make a div block *not* take space in its parent containerCSS：如何使 div 块 * 不 * 在其父容器中占用空间
【发布时间】：2012-04-12 03:28:17
【问题描述】：

如果我有 2 个 div 标签：

<div id="parentDiv">
   <div id="childDiv"><!-- other html --></div>
   <!-- parent div html -->
</div>

我希望<div id="childDiv"> 的内容与 的内容重叠。

原因（如果这对任何人来说都是糟糕的代码设计）：我需要在 google 网站中使用 hack 解决方法，我无法在侧边栏导航上添加自定义代码，只能在主 html 空间中，我想浮动一个不占用空间的 div 并将其相对定位在侧栏上以绕过强制限制.

除了阻止childDiv 占用它的混蛋主页容器中的空间之外，我可以做任何事情。

【问题讨论】：

你能发布你正在使用的 css，也许是一个 jsfiddle？

标签： css html positioning css-position

【解决方案1】：

你可以给它一个绝对位置，并用边距导航它。

#childDiv { 位置：绝对；边距顶部：-100px；左边距：-100px； }

【讨论】：

你还需要position: relative家长

【解决方案2】：

简单的怎么样

#childDiv {height:0; overflow:visible;}

但您可能希望它具有背景颜色，嗯？嗯。

【讨论】：

背景可以很容易地用第一个里面的另一个div来解决。

【解决方案3】：

#parentDiv {
    position: relative;
}
#childDiv {
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

如果您需要改变内容，或重叠侧边栏“外部”的内容，您可以使用负边距来增加 childDiv 的宽度或将其向上移动（以覆盖您无法覆盖的填充或边距覆盖）。

如果您需要让#childDiv 覆盖整个#parentDiv，您可以使用一些JavaScript 来设置childDiv 的最小高度，然后添加彩色背景或其他内容来覆盖任何内容。

var parentHeight = jQuery('#parentDiv').height();
jQuery('#childDiv').css('min-height',parentHeight + 'px');

【讨论】：

【解决方案4】：

您必须将子块从流程中取出。最好的方法是position: absolute 子级div 和position: relative 父级div。

【讨论】：

position: relative on parent 是关键。否则，孩子将“捕捉”到祖先位置。谢谢！