0

以前に同様の質問があったことは知っていますが、見つけることができるすべての解決策を試しました (外側の div の position:relative と内側の div の position: absolute を含む)。赤い div を緑の上に重ねるのではなく、その下に配置します。

HTML:

<body>
    <div id="outer_div">
         <div id="title_div">
         </div>

        <div id="main_div">
        </div>
    </div>
</body/>

CSS:

body {
    height: 1000px;
    width: 1000px;
    margin: 0;
    padding: 0;
}

#outer_div {

    position: relative;
    height: 100%;
    width: 100%;
    background-color: blue;
    display: block;
}    

#title_div {
    top: 0;
    left: 0;
    position: absolute;
    height: 25%;
    width: 100%;
    background-color: green;
    display: block;
}

#main_div {
    top: 0;
    left: 0;
    position: absolute;
    height: 20%;
    width: 100%;
    background-color: red;
    display: block;
}

これがjsFiddleリンクです。

ありがとう！

4

2 に答える 2

2

赤い div を緑の div の下に表示するには、次の手順を実行します。

  1. と"position: absolute;"から削除#main_div#title_div
  2. "float: left;"と#main_divに追加#title_div

これにより、各 div が可能な限り左に引っ張られます。両方を並べて配置できない場合は、2 番目が自動的に 1 番目よりも下に配置されます。

于 2013-10-04T00:39:57.583 に答える
0

両方の内側の div で同じ絶対上の位置があります。これを変更するには、div の自然な順序を許可したり、上部の位置を変更したりするなど、さまざまな方法があります。

于 2013-10-04T00:40:54.307 に答える