Html 高于绝对div和溢出的div

我有一个设置，其中我有一个绝对div，设置为左位置和右位置，以允许液体布局。这一切都很好地工作，但后来我遇到了一个问题，我有一个div下面的一些副本。问题是，带有副本的div应该位于绝对定位div的下方。现在它显示在上面是不正确的

我经常看到这个问题，因为在将子对象设置为绝对值后，父对象div会崩溃，但为了避免这个问题，我在父对象上使用了clear all或overflow:hidden，它会阻止崩溃的发生。这一次，它没有崩溃，但它显示了我的底部div高于顶部div

---

这里有一个链接向您展示我的代码。

我不知道您为什么认为这会起作用。您拥有容器

页脚

。这包含两个子div-

footerWrapper

和

footerTerms

FooterWrapper是绝对定位的。因此，它被从所有其他元素的流中移除。footerTerms是footerWrapper的同级，自然从其父项footer的左上角开始

为什么footerWrapper是绝对定位的，而您似乎希望它影响页面的内容流？使其相对或保持静止

---

我可能不理解您想要做什么，但是如果您想要一个流动的布局，为什么不使用类似的东西：

CSS:

#页脚包装{
背景：#ccc；
}
#页脚包装器.节{
浮动：左；
宽度：33%；
}
.清楚：之后{
内容：“；
显示：块；
明确：两者皆有；
可见性：隐藏；
线高：0；
身高：0；
}
html[xmlns]。清除{
显示：块；
}
*html。清除{
身高：1%；
}

HTML:

页脚第1节

页脚第1节

页脚第1节
页脚第2节

页脚第2节

页脚第2节

页脚第2节
页脚第3节

页脚第3节

页脚第3节
条款

---

然后，如果你想将页脚挂在页面右侧，你可以编辑#footerWrapper CSS并给它一个宽度和浮动。

在你的小提琴中有一些不匹配的标记。你能回去纠正一下吗？这可能是你的问题的原因。注意底部的红色div。tidyup按钮也应该对你有所帮助。这是一个缺少标签的问题，但这不是问题所在。很抱歉。还有另一个问题。

clear

用于清除浮动，而不是绝对定位的元素。kingjiv我很清楚这一点，但我不使用绝对定位来清除浮动。除非您在我的代码中看到了这一点，或者我遗漏了您看到的内容，否则FooterTerms不是FooterWrapper的兄弟。它在页脚包装的外面。FooterWrapper是绝对位置，所以我可以在它上面设置一个左位置，也可以在它上面设置一个右位置。现在left被设置为0，但这会改变。我想你对相对位置有一点看法，我总是可以设置相对div的左右位置。请再次查看你的代码。他确实是兄弟姐妹。我更新了我的答案，把中间的所有东西都删除了，这样你就可以看到了。实际上这不起作用，因为相对位置如果设置为左边的200 px，现在就把所有的东西都推到了Exter FrimeReSeMman之外，我只是检查了我的代码，页脚是一个页脚的孩子，而不是脚注包装器。footerWrapper设置为绝对值。但是在footerWrapper之外的div下面是footerTerms，这就是问题所在。我需要将footerWrapper设置为绝对，这样我就可以控制页面左右两侧的位置，并将其保持在窗口边界内。我更新了你的提琴来说明为什么相对位置不起作用。请参阅.footer.footerWrapper类，其中我将left设置为200px。现在，它将div定位在窗外，这不太好，我不确定这与我的结构有什么关系。所以除了选择使用div之外，section与dl元素是相同的？那么，对于每个部分，33%的数字是从哪里来的呢？你说将所有部分浮动到左边，然后你说如果需要，将其固定到右边。我不能给footerwarpper一个宽度，因为它基于liwuid，我没有像素宽度。另外，当左侧必须是从左侧开始的指定数量的像素，但也必须跨越右侧浏览器的宽度，并且在缩放浏览器时正确更新时，浮动左侧将如何帮助。是的，我选择使用div而不是dls，33%是通过做一些简单的数学计算得到的，100/3，然后将结果四舍五入到33，这意味着，无论页脚包装器有多宽，它们都会占用等量的空间。如果将页脚包装器固定为宽度并向右浮动没有意义，则忽略该注释。我只是想，在查看代码和生成的页面之后，这就是您想要做的。关键是，我上面的代码是一个页脚，可以跨越浏览器宽度，其中3个部分甚至占据了空间，下面还有一个div用于其他文本。感谢Sour Lemon解释您的设置。您的设置确实有效，但无法解决问题，因为您无法在左侧设置指定位置，然后将其固定到右侧。使用绝对定位可以做到这一点。但是因为它把它从其他元素的自然流动中带出来，我现在没有办法让它下面的元素知道它下面的位置应该在哪里。它很自然地要转到前面的对象位置，在设置为绝对之前，它是一个footerWrapper。主要的问题是如何绕过这一点

<div class="footer">
    <div class="footerWrapper"> 
    </div>
    <div class="footerTerms">
    </div>
</div>

<style type="text/css">
    #footerWrapper {
        background: #ccc;
    }
    #footerWrapper .section {
        float: left;
        width: 33%;
    }
    .clear:after {
        content: " ";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }
    html[xmlns] .clear {
        display: block;
    }
    * html .clear {
        height: 1%;
    }
</style>

<div id="footerWrapper">
    <div class="clear">
        <div class="section">
            Footer section 1<br />
            Footer section 1<br />
            Footer section 1
        </div>
        <div class="section">
            Footer section 2<br />
            Footer section 2<br />
            Footer section 2<br />
            Footer section 2
        </div>
        <div class="section">
            Footer section 3<br />
            Footer section 3<br />
            Footer section 3
        </div>
    </div>
    <div class="terms">
        Terms
    </div>
</div>