请帮我理解这个css问题

Question

我有下面的代码。第三个div与第二个div重叠。我有这个小提琴http://jsfiddle.net/v6E9a/4/。有人请告诉我如何正确排列这些div。我必须使用position：absolute as it支持一些功能。

  <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

您希望通过将第二个从顶部定位到与第一个div相同的高度来计算第一个<div>的高度。

查看此fiddle

Answer 2

这是你想要的吗？

<div style="border: 3px solid red">
    1
</div>
<div style="border: 3px solid green; position: absolute">
    2
</div>
<div style="border: 3px solid blue; margin-left: 14px;">
    3
</div>

结果

<强> JSFiddle Example

<击>

要使其适用于不同的字体大小：请使用display: inline;：

<div style="border : 3px solid red; font-size: 40px;">
    1 lorem ipsum dolor sit amet
</div>
<div style="border : 3px solid green; font-size: 40px; display: inline;">
    2 Lorem ipsum dolor sit amet
</div>
<div style="border : 3px solid blue; display:inline; font-size: 40px;">
    3 Lorem ipsum dolor sit amet
</div>

结果

<强> JSFiddle