HTML：divの下にdiv

Question

すべての回答は私を助けてくれません。

はこちらをご覧ください：https://jsfiddle.net/prg5hc9m/1/

#main { 
    width: 300px; 
    height: 400px; 
    position: relative; 
} 
#main1 { 
    position: absolute; 
    float:left; 
} 
#main2 { 
    position: absolute; 
    overflow-y: scroll; 
    height: inherit; 
    float:left; 
    width: 50%; 
} 

私はmain2はmain1下になりたいです。

Answer 1

あなたが必要とするものはあまり明確ではありませんが、floatで絶対値を使用することはできません。両方のスクロールセクションで絶対を削除すると、もう一方の下にスクロールセクションが表示されます。

更新フィドル：https://jsfiddle.net/prg5hc9m/3/

#main { 
    top: 20px; 
    left: 20px; 
    width: 300px; 
    height: 400px; 
    position: relative; 
    display:block; 
} 

#main1 { 
    float:left; 
} 

#main2 { 
    clear:left; 
    overflow-y: scroll; 
    height: 300px; 
    float:left; 
    //top: 10%; 
    width: 50%; 
} 

Answer 2

「下に」、私はあなたが「後ろ」を意味すると仮定しています。これを行うには、z-indexを追加する必要があります。

#main1 { 
    z-index: 1; 
} 

私が更新フィドルhereを作成しました：Z-インデックスはそう単純に与えるあなたの#main1は「トップに」が表示されるようにするには1のz-indexをDIV、ゼロから始まります。

希望すると便利です。 :)

Answer 3

使用インラインブロック。

#main { 
    top: 20px; 
    left: 20px; 
    width: 300px; 
    height: 400px; 
    position: relative; 
    display:block; 

}

#main1 { 
    display: inline-block; 
    float:left; 
    height: 50px; 
} 

#main2 { 
    clear:left; 
    display: inline-block; 
    overflow-y: scroll; 
    height: 300px; 
    float:left; 
    //top: 10%; 
    width: 50%; 
}