Force Relative DIV承认他的绝对DIV孩子

时间:2013-07-07 18:00:57

标签: html css

我遇到的问题是position:relative我的DIV不承认他的position:absolute孩子。因此,它会导致下一个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/

问题是,BLACK概述的DIV是Header DIV,它应位于页面的顶部,而RED概述的DIV是CONTENT DIV,它应该在HEADER DIV之后。

正如您所看到的,标题DIV忽略了它的子节点,因为它们位于绝对位置,这会导致设计问题。

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

2 个答案:

答案 0 :(得分:2)

绝对定位使元素超出正常流量。如果您希望它们影响容器的高度,请不要放置它们。

使用填充,边距,浮点数并显示内联块。

答案 1 :(得分:2)

好吧,定位标签是一种自闭症。如果您需要一个容器来调整其子项的尺寸,您有两种选择:

  1. 明确设置容器尺寸;或
  2. 让孩子不定位(更好的IMO)。