CSS の Position プロパティは、ページ上の要素の位置を設定するために使用され、適切と思われる場所に任意の属性を配置できます。
Position 属性は、要素の配置タイプを指定します。この属性は、要素のレイアウトを確立するために使用される位置決めメカニズムを定義します。任意の要素を配置できますが、絶対要素または固定要素は、要素自体のタイプに関係なく、ブロック レベルのボックスを生成します。相対的に配置された要素は、通常のフローではデフォルトの位置からオフセットされます。
Position 属性は、要素に適用される位置決め方法のタイプ (静的、相対、固定、絶対、またはスティッキー) を指定します。
要素は実際には、top、bottom、left、right 属性を使用して配置されます。ただし、これらのプロパティは、position プロパティが最初に設定されない限り、効果がありません。位置の値に応じて動作が異なります。
1. 静的位置決め: 静的
HTML 要素はデフォルトでは静的に配置されます。
静的に配置された要素は、上、下、左、右の属性の影響を受けません。
Position: static の要素は特別な方法で配置されるわけではなく、常にページの通常のフローに従って配置されます。
例：
<!DOCTYPEhtml><html><head><style>div{height:100px;border:1pxsolidblack;}div.static{width:130px;height:50px;background-color:#CCC;line-height:50px;text -align:center;position:static;top:50px;left:20px;}</style></head><body><div><divclass=static>item;</div></div></body ></html>実行結果:
2. 相対位置決め: 相対
例：
<html><head><styletype=text/css>#item1{幅:100px;高さ:100px;背景色:緑;}#item2{幅:100px;高さ:100px;背景色:赤;}< /style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div></div></body></html>実行結果:
コード内の CSS スタイル ファイルを次のように変更すると、次のようになります。
<html><head><styletype=text/css>#item1{幅:100px;高さ:100px;背景色:緑;}#item2{幅:100px;高さ:100px;背景色:赤;位置: relative;left:20px;top:20px;}</style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div></div ></body></html>実行結果:
概要: 相対とは、通常のドキュメント フローの位置に対する相対的なオフセットであり、最初に占有されていた位置がまだ存在します。これは、後続の要素の位置に影響を与えないことを意味します。左とは元の位置の右側に対してオフセットすることを意味し、上とは元の位置の下側に対してオフセットすることを意味します。左と右が同時に存在する場合は左のみ有効、上と下が同時に存在する場合は上のみが有効となります。相対オフセットは、オブジェクトのマージンの左上側に基づきます。
3. 絶対位置決め: 絶対
例：
<html><head><styletype=text/css>#item1{幅:100px;高さ:100px;背景色:緑;}#item2{幅:100px;高さ:100px;背景色:赤;}# content{margin-left:100px;margin-top:100px;}</style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div ></div></body></html>実行結果:
CSS スタイル ファイルを変更する場合:
<html><head><styletype=text/css>#item1{幅:100px;高さ:100px;背景色:緑;}#item2{幅:100px;高さ:100px;背景色:赤;位置: Absolute;left:20px;top:20px;}#content{margin-left:100px;margin-top:100px;}</style></head><body><divid=content><divid=item1>item1< /div><divid=item2>アイテム2</div></div></body></html>実行結果:
親要素のposition属性値がデフォルト値(static)の場合、absoluteはブラウザウィンドウを基準とした相対位置となることがわかります。
コンテンツの位置属性の値がデフォルト以外の値に設定されている場合、absolute は親要素を基準にして相対的に配置されます。
<html><head><styletype=text/css>#item1{幅:100px;高さ:100px;背景色:緑;}#item2{幅:100px;高さ:100px;背景色:赤;位置:絶対;左:20px;上:20px;}#content{margin-left:100px;margin-top:100px;position:relative}</style></head><body><divid=content><divid=item1 >item1</div><divid=item2>item2</div></div></body></html>実行結果:
CSS スタイルの変更を続けます。
<html><head><styletype=text/css>#item1{幅:100px;高さ:100px;背景色:緑;}#item2{幅:100px;高さ:100px;背景色:赤;}# content{margin-left:100px;margin-top:100px;position:absolute;padding:20px;border:10pxsolidblack;}</style></head><body><divid=content><divid=item1>item1< /div><divid=item2>アイテム2</div></div></body></html>実行結果:
外側の div を絶対に設定すると、外側の div の幅が 100% から auto に変化することに気づきましたか?
要素の位置プロパティを絶対または固定に設定すると、次の 3 つのことが起こります。
(1) 要素を Z 軸方向に 1 層移動します。要素は通常のフローから外れているため、元の層のスペースを占有せず、下の層の要素を覆います。
(2) 要素はブロック レベルの要素になります。これは、要素に display: block; を設定するのと同じです (<span> などのインライン要素を指定し、absolute を設定した後、幅と高さ)。
(3) 要素がブロックレベル要素の場合、要素の幅は元の幅 100% (1 行を占有する) から自動に変更されます。
4.固定位置：固定
固定配置とは、ブラウザ ウィンドウを基準にして要素を配置することです。Web 上でよく見かける「トップに戻る」ボタンのように、ブラウザ ウィンドウのスクロールによって要素が移動することはありません。これは、固定位置を使用して実現されます。
例：
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title></title><style>.out{border:red1pxsolid;height:600px;width:500px;}.in{border:blue1pxsolid;高さ:200px;幅:200px;}</style></head><body><divclass=outstyle=position:relative;><divclass=instyle=background-color:wheat;></div><divclass=instyle =background-color:red;position:fixed;left:20px;bottom:10px;></div><divclass=instyle=background-color:blue;></div></div></body></ html>実行結果:
5. スティッキーな位置決め: スティッキー
固定配置は、以前に紹介した 4 つの配置方法とは異なり、ページがスクロールされると、その効果は相対配置と同じになります。固定位置効果が再び表示されます。たとえば、一部の Web ページのナビゲーション メニューは、ページが読み込まれるときはデフォルトの位置にあり、下にスクロールするとページの上部に固定されます。
例：
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title></title><style>.out{border:red1pxsolid;height:600px;width:500px;}.in{border:blue1pxsolid;高さ:200px;幅:250px;}</style></head><body><divclass=out><divclass=instyle=background-color:wheat;></div><divclass=instyle=background-color: red;></div><divclass=instyle=background-color:blue;></div></div></body></html>実行結果:
