Html 强制相对DIV承认他的绝对DIV子女

我遇到了一个问题，我的DIV是

position:relative

不承认他的

position:absolute

孩子。因此，它会导致下一个

位置：relative

div显示在错误位置的问题

CSS:

HTML:

我的页面

要演示问题，请执行以下操作：

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

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

---

如何解决此问题？

绝对定位使元件脱离正常流动。如果您想让它们影响容器的高度，请不要放置它们

---

使用填充、边距、浮动和显示内联块代替。

绝对定位会使元素脱离正常流程。如果您想让它们影响容器的高度，请不要放置它们

---

使用填充、边距、浮动和显示内联块来代替。

嗯，定位标签有点孤独症。如果需要将容器调整为其子对象的尺寸，则有两种选择：

显式设置容器尺寸；或

使儿童不处于位置（更好的IMO）

---

嗯，定位标签有点自闭症。如果需要将容器调整为其子对象的尺寸，则有两种选择：

显式设置容器尺寸；或

使儿童不处于位置（更好的IMO）

---

拥有强制性代码标签的全部意义在于，您可以生成一个高质量的问题，而不会有像我这样的用户对它投反对票。不要在JSFIDLE中解释你的代码-在你的问题中发布它。重点是，你在问题中发布你的代码，这样人们就可以尝试解决你的问题，而不必在SOwell上不断地在你的JSFIDLE和你的描述之间切换，你希望它是我的命令，我猜：）检查编辑的帖子拥有强制性代码标签的全部目的是为了产生一个高质量的问题，而不是像我这样的用户对它投反对票。不要在JSFIDLE中解释你的代码-在你的问题中发布它。重点是你在问题中发布你的代码，这样人们就可以尝试解决你的问题，而不必一直在你的JSFIDLE和你在SOwell上的描述之间切换，我想你的愿望是我的命令：）检查编辑的帖子，因此，仅当尺寸不相关时才使用位置，这对于离散组件更有意义。在这里，您可以对标题使用定位，而不使用其子项。但也许它也不是一个很好的用例。例如，对话框窗口是定位的一个很好的用例。我明白了，所以只有当尺寸不相关时才使用位置。对于离散组件来说，使用位置更有意义。在这里，您可以对标题使用定位，而不使用其子项。但也许它也不是一个很好的用例。例如，对话框窗口是一个很好的定位用例。

#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;
}

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

<div id="content">

</div>