html - 强制相对 DIV 承认他的绝对 DIV child

Question

我遇到一个问题，我的 position:relative DIV 不承认他的 position:absolute child 。因此，它会导致下一个 position:relative div 显示在错误的位置。

CSS:

#header{
    margin: 0 auto;
    position:relative;
    width:740px;
    outline:2px solid black
}

#header #logo{
    position:absolute;
    width:218px;
    height:69px;
    background-image:url('../images/Logo.png');
    top:15px;
    left:30px;
    text-indent: -999px;
    overflow:hidden !important;
}

#header #logo a{
    width:218px;
    height: 69px;
}

#header h1{
    color:#437297;
    font-size:26px;
    font-weight: normal;
    position:absolute;
    top:25px;
    right:15px;
    letter-spacing: 0.5px;
}

/* content */

#content{
    position: :relative;
    margin: 0 auto;
    width:1024px;
    outline: 1px solid red;
    min-height:10px;
}

HTML:

<div id="header">
    <div id="logo"><a href="#">some text</a></div>
    <h1>My Page</h1>
</div>

<div id="content">

</div>

演示问题: http://jsfiddle.net/qBbYR/

问题是，黑色轮廓的 DIV 是应该位于页面顶部的页眉 DIV，而红色轮廓的 DIV 是应该紧跟在页眉 DIV 之后的内容 DIV。

如您所见，标题 DIV 忽略了它的子项，因为它们是绝对定位的，这会导致设计问题。

我该怎么做才能解决这个问题？

Answer 1

绝对定位使元素脱离正常流。如果您希望它们影响容器的高度，请不要定位它们。

改为使用填充、边距、 float 和显示内联 block 。