CSS绝对定位故障排除[关闭]答案

【问题标题】：CSS Absolute Positioning Troubleshooting [closed]CSS绝对定位故障排除[关闭]
【发布时间】：2014-04-25 03:35:30
【问题描述】：

为我的网站启用的 Divs：标题横幅（在横幅 div 内：是另一个 div 调用 innerbanner ）主要内容第二个内容页脚换行

我正在尝试开发的网站上有几个 div 标签，其中 2 个 div 标签使用绝对位置（1 个用于横幅，第二个用于页脚），但是当我使用绝对位置时定位横幅它将我的主要内容 div 向上推使其不可见，但我的页脚没有这个问题。你能帮帮我吗？

【问题讨论】：

请编码或jsfiddle.net
为此使用jsfiddle.net

标签： css html positioning absolute

【解决方案1】：

相对定位中的绝对定位

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

【讨论】：

【解决方案2】：

如果你想设置一个 div 绝对位置，请确保包含它的 div 有一个相对位置，这样它就不会脱离盒子并打乱元素，试试这个例子： html:

<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>

css:

.container{
width:75%;
height:500px;
border:1px black solid;
position: relative;
}
.box1{
    width:50px;
    height:50px;
    border:1px solid red;
    position:absolute;
    top:0;
    left:0;
}
.box2{
    width:50px;
    height:50px;
    border:1px solid green;
    position:absolute;
    bottom:0;
    right:0;
}

http://jsfiddle.net/ahmedskaya/DZ2DF/

【讨论】：

【解决方案3】：

请通过在 CSS 中为绝对定位（横幅）div 的父 div 定义一些高度来检查。这可能是内容 div 向上推的原因。由于绝对定位 div 的父级不会自动或通过绝对定位的内容绘制高度，并且折叠到其最小高度。

因此，您可能需要在 CSS 中定义父 div 的特定高度，以使其覆盖绝对定位 div 的高度区域。

此外，由于您的内容 div 将（可能）具有正常内容（不是绝对定位），因此它会像普通 div 一样绘制高度。所以页脚 div 不能向上推超过它的高度。

这应该可以解决您的问题。

【讨论】：