CSSポジションの5つの異なる値の使い方の詳細な説明

位置プロパティ

position プロパティは、要素に使用する配置方法のタイプ (静的、相対的、固定、絶対的、または固定) を指定します。 5 つの異なる値があります:

•静的
•相対的
•修理済み
•絶対
•粘着性

次に、top、bottom、left、right のプロパティを使用して要素を配置します。ただし、位置プロパティが最初に設定されていない限り、これらのプロパティは効果がありません。位置の値に応じて動作が異なります。

位置:静的;

デフォルトでは、HTML 要素は静的に配置されます。静的に配置された要素は、top、bottom、left、right のプロパティの影響を受けません。 position:static; を持つ要素は特別な方法で配置されるわけではなく、常にページの通常の流れに従って配置されます。

この <div> 要素には position:static; があります。

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="utf-8">
    <title>css</title>
    <スタイル>
        div.static {
            位置: 静的;
            境界線: 3px 実線 #73AD21;
        }
    </スタイル>
</head>
<本文>
<h2>位置: 静的;</h2>
<p>position:static 要素には特別な配置はありません。常にページの通常の流れに従って配置されます。</p>
<div class="static">
    この div 要素の位置は static です。
</div>
</本文>
</html>

位置:相対;

position: relative; を持つ要素は、通常の位置を基準として配置されます。相対的に配置された要素の上、下、左、右のプロパティを設定すると、通常の位置から調整されます。その他のコンテンツは、要素によって残された空白に合わせて調整されません。

この <div> 要素には position:relative; があります。

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="utf-8">
    <title>css</title>
    <スタイル>
        div.相対{
            位置: 相対的;
            左: 30px;
            境界線: 3px 実線 #73AD21;
        }
    </スタイル>
</head>
<本文>
<h2>位置: 相対;</h2>
<p>position:relative; を持つ要素は、通常の位置に対して相対的に配置されます:</p>
<div class="相対">
    この div 要素には position: relative; があります。
</div>
</本文>
</html>

位置:固定;

position:fixed; を持つ要素はビューポートを基準に配置されるため、ページがスクロールされても常に同じ位置に留まります。要素を配置するには、top、bottom、left、right プロパティを使用します。固定要素は、通常配置されるページに隙間を残しません。ページの右下隅にある固定要素に注目してください。

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="utf-8">
    <title>CSS チュートリアル (jc2182.com)</title>
    <スタイル>
        div.fixed {
            位置: 固定;
            下部: 0;
            右: 0;
            幅: 300ピクセル;
            境界線: 3px 実線 #73AD21;
        }
    </スタイル>
</head>
<本文>
<h2>位置:固定;</h2>
<p>position:fixed; はビューポートを基準に配置されるため、ページがスクロールされても常に同じ位置に留まります。</p>
<div class="fixed">
    この div 要素には position: fixed; があります。
</div>
</本文>
</html>

位置:絶対;

position: absolute; を持つ要素は、最も近い位置にある祖先を基準として配置されます ( fixed のようにビューポートを基準として配置されるのではなく)。ただし、絶対位置に配置された要素に位置指定された祖先がない場合、ドキュメント本体が使用され、ページのスクロールとともに移動します。注意: 「配置された」要素の位置は、静的要素以外の任意の要素です。

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="utf-8">
    <title>CSS チュートリアル (jc2182.com)</title>
    <スタイル>
        div.相対{
            位置: 相対的;
            幅: 400ピクセル;
            高さ: 200px;
            境界線: 3px 実線 #73AD21;
        }
        div.absolute {
            位置: 絶対;
            上: 80px;
            右: 0;
            幅: 200ピクセル;
            高さ: 100px;
            境界線: 3px 実線 #73AD21;
        }
    </スタイル>
</head>
<本文>
<h2>位置: 絶対;</h2>
<p>position: absolute; の要素は、最も近い位置にある祖先を基準として配置されます (fixed のようにビューポートを基準にするのではなく)。</p>
<div class="relative">この div 要素には position: relative; があります。
    <div class="absolute">この div 要素には position: absolute; があります</div>
</div>
</本文>
</html>

位置:固定;

position:sticky; は、ユーザーのスクロール位置に基づいて要素を配置します。スティッキー要素は、スクロール位置に応じて相対的と固定の間で切り替わります。指定されたオフセット位置がビューポート内で満たされるまで相対的に配置され、その後所定の位置に「固定」されます (position: fixed のように)。

注意: Internet Explorer、Edge 15 以前では固定配置はサポートされていません。 Safari では -webkit- プレフィックスが必要です (以下の例を参照)。スティッキー配置が機能するには、上、右、下、左のうち少なくとも 1 つを指定する必要があります。

この例では、top: 0 により、スクロール位置に到達したときに固定要素がページの上部に固定されます。

<!DOCTYPE html>
<html>
<ヘッド>
    <スタイル>
        div.sticky{
            位置: -webkit-sticky;
            位置: 固定;
            上: 0;
            パディング: 5px;
            背景色: #cae8ca;
            境界線: 2px実線 #4CAF50;
        }
    </スタイル>
</head>
<本文>
<p>このフレーム内で <b>スクロール</b> して、固定配置がどのように機能するかを確認してください。 </p>
<p>注意: IE/Edge15 以前のバージョンでは position: sticky; はサポートされていません。 </p>
<div class="sticky">私は粘着質です！</div>
<div style="padding-bottom:2000px">
    <p>この例では、スクロール位置に到達すると、固定要素はページの上部 (top: 0) に固定されます。 </p>
    <p>上にスクロールすると粘着が解除されます。 </p>
    <p>スクロールを可能にするテキストです。私は昔からとても良い人間で、これができるとずっと思っていました。私は昔からそれが得意でした。私は昔からそれが得意でした。</p>
    <p>スクロールを可能にするテキストです。私は昔からとても良い人間で、これができるとずっと思っていました。私は昔からそれが得意でした。私は昔からそれが得意でした。</p>
    <p>スクロールを可能にするテキストです。私は昔からとても良い人間で、これができるとずっと思っていました。私は昔からそれが得意でした。私は昔からそれが得意でした。</p>
    <p>スクロールを可能にするテキストです。私は昔からとても良い人間で、これができるとずっと思っていました。私は昔からそれが得意でした。私は昔からそれが得意でした。</p>
</div>
</本文>
</html>

オンラインで体験してスクロール位置に到達してください

すべてのCSS配置プロパティ

財産	説明する
底	配置ボックスの下端を設定します
クリップ	絶対配置された要素のクリッピング
左	配置ボックスの左端を設定します
位置	要素の配置タイプを指定します
右	配置ボックスの右端を設定します
トップ	配置ボックスの上端を設定します
Zインデックス	要素の積み重ね順序を設定します

要約する

上記は、エディターが紹介した CSS 位置の 5 つの異なる値の使用方法です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: Tomcatでcatalina.batがUTF-8に設定されている場合、コンソールに文字化けした文字が表示されます

>>: 表のセル間の境界線/区切り線を非表示にする方法