CSS の位??置
CSS では、Position 屬性がよく使用されます。主に絶対配置と相対配置です。単純に使用するのは問(wèn)題ありませんが、特にネストされている場(chǎng)合は少し混亂します。
Position 屬性: 要素の配置タイプを指定します。つまり、要素はドキュメント フローのレイアウトから分離され、ページ上の任意の場(chǎng)所に表示されます。
position 屬性値:
absolute: 靜的配置以外の最初の親要素を基準(zhǔn)にして配置される絶対配置要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」屬性によって指定されます。
relative: 通常の位置を基準(zhǔn)にして、相対的に配置された要素を生成します。したがって、「left:20」は要素の LEFT 位置に 20 ピクセルを追加します。
修正: ブラウザ ウィンドウを基準(zhǔn)にして絶対配置された要素を生成します。
static: デフォルト値。位置決めを行わない場(chǎng)合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無(wú)視されます)。要素の位置は、「left」、「top」、「right」、および「bottom」屬性によって指定されます。
inherit:position 屬性の値を親要素から継承することを指定します。
最も一般的に使用される 2 つの方法は、絶対メソッドと相対メソッドです。
位置補(bǔ)助屬性:
①left: 要素の左側(cè)に挿入するピクセル數(shù)と、要素を右側(cè)に移動(dòng)するピクセル數(shù)を示します。
②right: 要素の右側(cè)に何ピクセル挿入するか、要素を左側(cè)に何ピクセル移動(dòng)するかを示します。
③top: 要素の上に挿入するピクセル數(shù)と、要素を下に移動(dòng)するピクセル數(shù)を示します。
④bottom: 要素の下に挿入するピクセル數(shù)と、要素を上に移動(dòng)するピクセル數(shù)を示します。
上記の屬性の値は負(fù)の値になる可能性があります (単位: px)。
Absolute 絶対配置
ドキュメントフローのレイアウトのうち、殘りのスペースは後続の要素によって埋められます。位置決めの開始位置は最も近い親要素 (位置は靜的ではありません) であり、それ以外の場(chǎng)合は本文ドキュメント自體です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實(shí)例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>注: Sub1 の絶対位置が原因??で、Sub1 の位置がシフトしている一方、兄弟 Div Sub2 が Sub1 の位置を占め、Sub1 が Sub2 をブロックしていることがわかりました。
相対 相対位置決め
相対位置決めは、ドキュメント フローのレイアウトから離れることはなく、ドキュメント フローの元の位置に空白領(lǐng)域を殘して、獨(dú)自の位置を変更するだけです。配置の開始位置は、ドキュメント フロー內(nèi)のこの要素の元の位置です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實(shí)例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>注: Sub1 がオフセットされていることがわかりますが、これは Sub2 の位置に影響しませんが、Sub2 もカバーします。オフセットは Div Parent を基準(zhǔn)としたものではなく、Sub1 の元の位置を基準(zhǔn)としたものであることに注意してください。
固定位置
固定位置; 絶対位置と似ていますが、スクロール バーが移動(dòng)しても位置は変わりません。
<meta charset="utf-8">
<title>實(shí)例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
top: 5px;
left: 5px;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>注: Sub2 は常にボディと一緒に配置されていることがわかります。
