CSS では、Position 属性がよく使用されます。主に絶対配置と相対配置です。単純に使用するのは問題ありませんが、特にネストされている場合は少し混乱します。
Position 属性: 要素の配置タイプを指定します。つまり、要素はドキュメント フローのレイアウトから分離され、ページ上の任意の場所に表示されます。
position 属性値:
absolute: 静的配置以外の最初の親要素を基準にして配置される絶対配置要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。
relative: 通常の位置を基準にして、相対的に配置された要素を生成します。したがって、「left:20」は要素の LEFT 位置に 20 ピクセルを追加します。
修正: ブラウザ ウィンドウを基準にして絶対配置された要素を生成します。
static: デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。要素の位置は、「left」、「top」、「right」、および「bottom」属性によって指定されます。
inherit:position 属性の値を親要素から継承することを指定します。
最も一般的に使用される 2 つの方法は、絶対メソッドと相対メソッドです。
位置補助属性:
①left: 要素の左側に挿入するピクセル数と、要素を右側に移動するピクセル数を示します。
②right: 要素の右側に何ピクセル挿入するか、要素を左側に何ピクセル移動するかを示します。
③top: 要素の上に挿入するピクセル数と、要素を下に移動するピクセル数を示します。
④bottom: 要素の下に挿入するピクセル数と、要素を上に移動するピクセル数を示します。
上記の属性の値は負の値になる可能性があります (単位: px)。
Absolute 絶対配置
ドキュメントフローのレイアウトのうち、残りのスペースは後続の要素によって埋められます。位置決めの開始位置は最も近い親要素 (位置は静的ではありません) であり、それ以外の場合は本文ドキュメント自体です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</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 をブロックしていることがわかりました。
相対 相対位置決め
相対位置決めは、ドキュメント フローのレイアウトから離れることはなく、ドキュメント フローの元の位置に空白領域を残して、独自の位置を変更するだけです。配置の開始位置は、ドキュメント フロー内のこの要素の元の位置です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</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 を基準としたものではなく、Sub1 の元の位置を基準としたものであることに注意してください。
固定位置
固定位置; 絶対位置と似ていますが、スクロール バーが移動しても位置は変わりません。
<meta charset="utf-8">
<title>实例</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 は常にボディと一緒に配置されていることがわかります。
次のセクション