html - 我如何绝对定位一个 div 并使其保持在其原始顶部位置，并且其上方的 dom 元素是 float 的？

Question

我只是想要一个绝对定位的 div 位于其当前偏移顶部位置，但我意识到如果 DOM 中它上方的任何元素是 float 的(即使该元素位于未 float 的元素内)它会捕捉到相对父级的顶部。一旦我删除上面的 float ，absolutley 定位的 div 就会捕捉到顶部。任何帮助是极大的赞赏。这是一把 fiddle http://jsfiddle.net/hPA3M/2/

这是我的 HTML:

   <div class="parent">
        <div class="child1">
            <div class="baby1">
                <p>Baby</p>
            </div>
            <div class="baby1">
                <p>Baby</p>
            </div>
            <div class="baby1">
                <p>Baby</p>
            </div>
        </div>
        <div class="child2">
        </div>
    </div>

这是我的CSS:

    .parent {
        position:relative;
        height:800px;
        width:400px;
        background:#ff0000;
        padding:20px;
    }

    .child1 {
        width:100%;
        background-color:#00ff00;
        margin-bottom:10px;
    }

    .baby1 {
        background:#e1e1e1;
        /*
        toggling float on and off has very different effects
        */
        float:left;
        width:30%;
    }

    .child2 {
        position:absolute;
        width:100%;
        height:100px;
        background-color:#0000ff;
    }

Answer 1

为 .child1 选择器添加 overflow: hidden:

    .child1 {
        width:100%;
        background-color:#00ff00;
        margin-bottom:10px;

    }

Demo