css - CSS 和格式中的相对和绝对定位

Question

我在这个 fiddle 中有以下 HTML http://jsfiddle.net/v6E9a/ .问题是页脚与正文重叠。如果我将正文位置更改为相对位置，则所有内容都正确排列，但我需要绝对位置以支持其他一些功能。

我真的不太擅长 CSS。有人可以看看 html 并告诉我如何正确排列页眉和页脚吗。

<div id="s4-workspace" style="width: 1920px; height: 748px; overflow:scroll">
    <div id="s4-bodyContainer" style="position:relative">   

        <div class="headerSection" style="position:relative ;border : 3px solid red">           
            <div class="globalHeader">  
                header
            </div>
        </div>  
        <div>          
            <div id="contentRow" style="position:relative">
                <div class="fixedWidthMain" style="position:relative">   
                         <div class="fixedWidthMain" style="position:absolute ;border:3px solid blue">   
                         main data
                </div>           
                </div>
            </div>
        </div>
    </div>

    <!--PAGE FOOTER SECTION-->
    <div class="pageFooterSection" style="clear: both;position:relative ;border:3px solid green">      
  footer
    </div>  
    </div>

Answer 1

绝对不占用空间，这就是页脚位于顶部的原因。有很多方法可以解决这个问题。如果您的主要效果具有固定高度，您可以将该值作为顶部边距添加到页脚。

固定主要高度 fx 400px

pageFooterSection 的 margin-top 为 400px