ホームページ >ウェブフロントエンド >CSSチュートリアル >div+css による Web ページ レイアウト デザインの新たな始まり (9)
div+css による Web ページ レイアウト デザインの新たな始まり (9)
- 黄舟オリジナル
- 2016-12-29 14:48:291653ブラウズ
フローティングの紹介はほぼ終わりました。参考までにいくつか写真を撮ってみましょう
もう一つ、インライン要素もフロートに設定すると、自動的にブロックになります。要素は、表示が設定されるのと同じ時間です
ここでは絶対配置について紹介します
絶対配置に設定された要素ボックスはドキュメント フローから完全に削除され、その要素を含むブロックに対して相対的に配置されます。これは、ドキュメント内の別の要素である可能性があります。ドキュメントまたは最初の包含ブロック。通常のドキュメント フローで要素が以前に占めていたスペースは、その要素が存在しないかのように閉じられます。この要素は、通常のフローで最初に生成されたボックスの種類に関係なく、配置後にブロック レベルのボックスを生成します。
絶対配置では、要素の位置がドキュメント フローから独立するため、スペースを占有しません。これは、要素の位置が通常のフロー内の位置を基準とするため、実際には通常のフロー位置決めモデルの一部とみなされる相対位置決めとは異なります。
最初に概念を脇に置いて、簡単に言うと
絶対配置とは、配置にマージンとフロートが不要になることを意味しますが、配置は座標に基づいて行われます
座標の開始点はブラウザの左上隅の点です
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
} #b{
width:100px;
height:100px;
border:soild;
background:green;
position: absolute;
left:30px;
top: 20px; } </style>
<head>
<body>
<div id="a">
<div id="b"></div> </div>
</body>
</html> 
緑は親 div に従って配置されるのではなく、ブラウザ ボックスの左上隅の位置に従って配置されることがわかります
しかし、親 div が絶対配置または相対配置も定義している場合はどうなるでしょうか?
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
position: absolute;
} #b{
width:100px;
height:100px;
border:soild;
background:green;
position: absolute;
left:30px;
top: 20px; } </style>
<head>
<body>
<div id="a">
<div id="b"></div> </div>
</body>
</html>
その後、親 div の左上隅に基づいて配置されます (親レイヤーは位置: 相対を定義します。これも有効です)
つまり、絶対位置で定義されたレイヤーが、絶対的または相対的に配置されていないため、意味がありません。非絶対的または相対的な配置レイヤーに制約されない、完全に独立した div と同等です。実際、マージン配置は周囲の div を必要とするよりもはるかに優れています。絶対配置は左上隅に従って座標を調整するだけです
絶対配置は、その領域がすでに div によって占有されている場合でも、任意の領域に移動できます
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
position: relative; } #b{
width:100px;
height:100px;
border:soild;
background:green;
position: absolute;
left:30px;
top: 20px; } #c{
width:100px;
height:100px;
border:soild;
background:red; } </style>
<head>
<body>
<div id="a">
<div id="c"></div>
<div id="b"></div> </div>
</body>
</html>。
 "1482993946353div+css による Web ページ レイアウト デザインの新たな始まり (9)")
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
position: relative; } #b{
width:100px;
height:100px;
border:soild;
background:green;
position: absolute;
left:30px;
top: 20px; } #c{
width:200px;
height:200px;
border:soild;
background:red;
float:left;
margin:10px;
}
#d{
width:100px;
height:100px;
border:soild;
background:blue; } </style>
<head>
<body>
<div id="a">
<div id="c"></div>
<div id="d"></div>
<div id="b"></div> </div>
</body>
</html>
青は通常のdiv、赤はフローティングdiv、緑は絶対配置divです
つまり、通常の div は地上パターンに従います
浮動 div は空中の流れパターンに従います。1 つは地上の平面、もう 1 つは空中の平面です
その場合、絶対的に配置された div は次と同等です飛行機よりも高く飛んで、自由に移動できる飛行船です
それでは、絶対位置の div が一緒に集まると何が起こるか見てみましょう
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
position: relative; } #b{
width:100px;
height:100px;
border:soild;
background:green;
position: absolute;
left:30px;
top: 20px; } #c{
width:100px;
height:100px;
border:soild;
background:red;
position: absolute;
left:60px;
top: 20px;
}
</style>
<head>
<body>
<div id="a">
<div id="c"></div>
<div id="b"></div> </div>
</body>
</html>
緑が赤を覆っているのがわかります。これは、2 つの絶対 div が接触しないことを意味します。フローモードがあるため、マージンの使用は無効です
では、なぜ緑が赤を覆い、赤が緑を覆わないのでしょうか？
ここだから
赤の div が前にあり、緑が後ろにあるからです。戻ると、Web ページは上から下、左から右に解析されるため、解析されると、赤い div が最初に表示され、緑の div がそれをカバーします。つまり、絶対的に配置された div が後方になるほど、より高く飛ぶと、前の絶対位置の div をカバーできます。
これら 2 つを裏返すと、z-index レベルが高くなるほど、赤が緑をカバーすることがわかります。設定されていない場合は、デフォルトで 0 になります。
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
position: relative; } #b{
width:100px;
height:100px;
border:soild;
background:green;
position: absolute;
left:30px;
top: 20px; } #c{
width:100px;
height:100px;
border:soild;
background:red;
position: absolute;
left:60px;
top: 20px;
z-index:1;
}
</style>
<head>
<body>
<div id="a">
<div id="c"></div>
<div id="b"></div> </div>
</body>
</html> このようにすると、絶対に配置された div の出現順序を考慮せずに、それらを誰の上に置くことができます
