0

DIV が彼の子供position:relativeを認識しないという問題が発生しました。したがって、次のdiv が間違った場所に表示されるposition:absoluteという問題が発生します。position:relative

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 がページの上部にあるヘッダー DIV であり、RED で囲まれた DIV が HEADER DIV の直後にある CONTENT DIV であることです。

ご覧のとおり、ヘッダー DIV は子を無視します。これは、子が絶対配置されているためであり、設計上の問題が発生します。

この問題を解決するにはどうすればよいですか?

4

2 に答える 2

2

絶対配置は、要素を通常の流れから外します。コンテナの高さに影響を与えたい場合は、配置しないでください。

代わりに、パディング、マージン、フロート、およびインライン ブロックの表示を使用してください。

于 2013-07-07T18:15:39.580 に答える
2

まあ、配置されたタグは一種の自閉症です。コンテナーを子のサイズに合わせて調整する必要がある場合は、次の 2 つの選択肢があります。

  1. コンテナーの寸法を明示的に設定します。また
  2. 子供を配置しないようにします（IMOの方が良い）。
于 2013-07-07T18:16:10.673 に答える