CSS絶対配置(absolute)、相対配置(relative)の方法(詳しい解説)

乾物に直接、CSS で一般的に使用されるいくつかの配置方法!

ポジショニングとは？

要素は、上、下、左、および右のプロパティを使用して配置できます。ただし、これらのプロパティは最初に設定しないと機能しません

位置プロパティ。また、ターゲティング方法によって、動作も異なります。

position 属性は、要素の配置タイプを指定します。 これは、ドキュメント内での要素の配置方法を指定するために使用されます。

属性:

相対相対位置
絶対絶対位置決め
固定固定位置
スティッキー スティッキーポジショニング
属性値が上記の4つである要素をポジショニング要素と呼びます
static 属性値が static の場合、デフォルトの属性値は配置要素ではありません

ポジショニングでは、上下左右の 4 つの属性によってポジショニング要素の位置を決定します。

相対位置: 位置 : 相対

相対配置では、配置要素は元の位置に従って配置されます. 相対配置はドキュメントフローから離れることはなく、ドキュメントフロー内の他の要素には影響しません. オフセットは指定された値に基づいており、値は次のことができます.否定的であること;

top 値が大きいほど、トップが低くなるトップと元の位置との差
ボトムの値が大きいほど、ボトムと元の位置の差が大きくなります
左の値が大きいほど、左と元の位置の差が右に大きくなります
ight の値が大きいほど、左右と元の位置の差が大きくなります

特徴元の位置を占有し、ドキュメントフロー内の位置を占有します。

絶対位置: 位置:絶対

絶対配置では、配置基準は配置要素の親であり、ボディ要素が見つかるまで、絶対配置要素は文書の流れから離れ、幅と高さは行に設定でき、ブロック要素1 行を占有せず、コンテンツによって幅と高さが拡張されます。

top 値が大きいほど上と配置親の上との差が小さい
値が大きいほど、ポジショニングの親の下部と下部の差が大きくなります
left の値が大きいほど、より右になります。位置付けの親の左と左の差
right 値が大きいほど、配置親の右と右の差が大きくなります

機能アウトオブドキュメントフロー

固定位置: 位置: 固定

ブラウザーウィンドウの位置とサイズに応じて配置すると、画面コンテンツがスクロールしても要素の位置は変化せず、固定配置された要素はドキュメントフローから移動します。

ウィンドウの上端に合わせた位置
ウィンドウの下部に応じた位置
ウィンドウの左側に応じた左位置
right ウィンドウの右側に合わせた位置

スティッキーポジショニング: position:sticky

スティッキーポジショニングは、相対ポジショニングと固定ポジショニングの混合として見ることができます. 要素は、しきい値を超える前に相対的に配置され、その後固定されます。

.stickyElement{

幅: 100%;

高さ: 30px;

背景色: #FFFFAA;

位置: スティッキー;

上: 10px;

}

特徴：

要素がウィンドウの上部から 10px 未満にスクロールする前に、要素は相対的に配置され、ウィンドウがロールバックされるまで、要素は上部が 10px の位置に固定されます。

スティッキーポジショニングは、新しく追加された CSS3 コンテンツであり、古いブラウザではサポートされていない可能性があります。

拡大：

z インデックス z 軸

要素が表示される順序

値は正の整数です

場合：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        body{
            margin: 0;
        }
        .relativeElement{
            position:relative;
            width: 300px;
            height: 300px;
            background-color: #FFAAAA;
            z-index: 2;
        }
        .normalElement{
            width: 300px;
            height: 900px;
            background-color: #AAFFAA;
           
        }
        .absoluteElement{
            width: 100px;
            height: 100px;
            background-color: #AAAAFF;
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 10;
        }
        .fixedElement{
            width: 100%;
            height: 30px;
            background-color: #FFFFAA;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 99;
        }
        .stickyElement{
            width: 100%;
            height: 30px;
            background-color: #FFFFAA;
            position: sticky;
            top: 10px;
        }
    </style>
</head>
<body>
 <div class="relativeElement">
        <span class="absoluteElement"></span>
        <div style="width:100px;height:100px;background-color:#AAFFAA;z-index: 9;position: absolute;"></div>
       
     </div>
     <div class="stickyElement">粘性导航条</div>
     <div class="normalElement">
        <!-- <div class="absoluteElement"></div> -->
     </div>
     <div class="normalElement" style="background-color: #AAFFFF"></div>
     <!-- <div class="fixedElement">导航条——吸顶导航</div> -->
</body>
</html>

はやく、いいね、集めて走らせて！