divのテキストが上から表示されない理由

私はCSSを学んでいますが、私が理解していない振る舞いがありますので、下のコードを見てください。divのテキストが上から表示されない理由

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    <style type="text/css"> 
 
    #testDiv{ 
 
     width: 100px; 
 
     height: 100px; 
 
     background-color: lightblue; 
 
     float: left; 
 
    } 
 
    #testDiv1{ 
 
     width: 100px; 
 
     height: 200px; 
 
     background-color: red; 
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="testDiv"></div> 
 
    <div id="testDiv1"> 
 
     <p> 
 
     This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. 
 
     </p> 
 
    </div> 
 
    </body> 
 
</html>

私が最初のdivはsceond 1をカバーします知っているが、なぜ第二のdiv内のテキストをカバーすることがないのですか？最初のdivの後の位置から表示されます。

出典

2016-04-18 Allen4Tech

私は、テキストがページの上部から表示されない理由を意味します。を参照してください。最初のdivの下に表示されます。

最初のdivは2：nd divをプッシュし、 "float"プロパティのように上に浮かない。

テキストを先頭から始めるには、最初のdivで絶対位置を使用するか、最初のdivの幅にマッチする2番目のdivに負のマージンまたは左マージンを与えます（下のサンプルのように）。最初。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    <style type="text/css"> 
 
    #testDiv{ 
 
     width: 100px; 
 
     height: 100px; 
 
     background-color: lightblue; 
 
     float: left; 
 
    } 
 
    #testDiv1{ 
 
     margin-left: 100px;   /* added */ 
 
     width: 100px; 
 
     min-height: 200px;   /* changed */ 
 
     background-color: red; 
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="testDiv"></div> 
 
    <div id="testDiv1"> 
 
     <p> 
 
     This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. 
 
     </p> 
 
    </div> 
 
    </body> 
 
</html>

出典

2016-04-18 15:39:18 LGSon

感謝。私は、なぜテキストがページの上部から表示されないのかを見ると、最初のdivの下に表示されます。 – Allen4Tech

@ Allen4Techもう一度私の答えを更新しました。それはあなたのために物事をクリアしますか？ – LGSon

Floated要素は、アウトフローであるため、第一要素は第二に重なります。彼らは行ボックスを縮小しかし、彼らは特別です：

フロートが流れていないので、フロートが存在していなかったかのようにフロートボックスが縦に流れの前後に、非位置するブロックボックスはを作成しました。しかし、フロートのの隣に作成された現在のラインボックスとそれに続くラインボックスは、フロートのマージンボックスのためのスペースを確保するために必要に応じて短縮されます。

この場合、次の要素と同じ幅であるため、上部の行ボックスは幅を持たないため、テキストは幅のあるフロートの後ろの行ボックスに下がります。

あなたは二番目の行ボックスを縮小する最初の要素をしたくない場合は、あなたがabsolute positioningのような他のアウトフローモードを使用する必要があります。絶対位置決めモデルで

、箱[...]は通常フローから完全に削除されます（後の兄弟には影響しません）。お返事のための

#testDiv { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: lightblue; 
 
    opacity: .8; 
 
    position: absolute; 
 
} 
 
#testDiv1 { 
 
    width: 100px; 
 
    height: 200px; 
 
    background-color: red; 
 
}

<div id="testDiv"></div> 
 
<div id="testDiv1">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>

出典

2016-04-18 15:40:59 Oriol

divのテキストが上から表示されない理由

答えて

関連する問題