div高于绝对div和溢出

Question

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

我经常看到这个问题，因为在孩子被设置为绝对后折叠父母的div，但为了解决这个问题，我使用清除所有或溢出：父母隐藏，它停止发生崩溃。这一次围绕它的不崩溃，但它显示我的底部股利高于顶部股利。

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

Answer 1

我不知道为什么你认为这会奏效。你有容器footer。这包含两个子div-footerWrapper和footerTerms。

FooterWrapper绝对定位。所以它被排除在所有其他元素的流动之外。 footerTerms是footerWrapper的兄弟，自然地从其父，页脚的左上角开始。

为什么footerWrapper绝对定位好像你想让它影响你的页面内容流？使其相对或保持静态。

http://jsfiddle.net/mrtsherman/7cNf7/3/

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

Answer 2

我有probabaly错误理解你想做的事，但如果你想要一个液态布局为什么不使用这样的事情：

CSS：

<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> 

HTML：

<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> 

然后，如果您想将页脚挂到页面的右侧，例如您可以编辑#footerWrapper CSS并给它一个宽度和浮点数。