ポジションの深い理解と応用

位置は一般的に位置決めとして知られており、その主な値と機能は次のとおりです。

位置はまったく複雑ではありませんが、アプリケーションを混乱させると理解するのが難しくなります。

ドキュメント フローの外

static 属性値を除き、他のすべての値が使用されます要素はドキュメント フローから切り離されます (float を使用すると要素もドキュメント フローから切り離されます)。

幅と高さへの影響

1) Absolute の参照点は、参照点として使用できる最も近い親要素 (位置が絶対、相対、固定である要素)、fixed の参照点はブラウザ ウィンドウであり、相対の基準点は要素の通常の位置です。

2) 要素自体の値が継承される場合

a) 親要素の幅と高さの値が数値の場合、要素は親要素の高さ全体を継承し、最も近い参照点を使用します参考に。

.wrap{
            position: relative;
            width: 500px;
            height: 300px;
            border: 1px solid red;
        }
        .cont{
            background: gray;
            width: 150px;
            overflow: hidden;
        }
        .txt{
            background: yellow;
            width: 230px;
            height: inherit;
        }
        .banner{
            background: pink;
            width: 50%;
            height: inherit;
        }
        .txt-cont{
            position: absolute;
            background: darkblue;
            width: inherit;
            color: white;
        }

<div class="wrap">
        <div class="cont">
            cont
            <div class="txt">
                txtxtxt
                <div class="txt-cont">
                    txt-cont
                </div>
            </div>
            <div class="banner">
                banner
            </div>
        </div>
</div>

b) 親要素の幅と高さの値がパーセントの場合、基準点要素の幅と高さ×パーセントに基づいて計算されます。

.wrap{
            position: relative;
            width: 500px;
            height: 300px;
            border: 1px solid red;
        }
        .cont{
            background: gray;
            width: 150px;
            overflow: hidden;
        }
        .txt{
            background: yellow;
            width: 50%;
            height: inherit;
        }
        .banner{
            background: pink;
            width: 50%;
            height: inherit;
        }
        .txt-cont{
            position: absolute;
            background: darkblue;
            width: inherit;
            color: white;
        }

<div class="wrap">
        <div class="cont">
            cont
            <div class="txt">
                txt
                <div class="txt-cont">
                    txt-cont
                </div>
            </div>
            <div class="banner">
                banner
            </div>
        </div>
</div>

3)要素自体がパーセンテージ(50%)の場合

この場合、親要素の幅と高さが数値でもパーセンテージでも要素には影響しません要素自体はそのままです。対応する計算は参照を使用して行われます。

.wrap{
            position: relative;
            width: 500px;
            height: 300px;
            border: 1px solid red;
        }
        .cont{
            background: gray;
            width: 150px;
            overflow: hidden;
        }
        .txt{
            background: yellow;
            width: 50%;
            height: inherit;
        }
        .banner{
            background: pink;
            width: 50%;
            height: inherit;
        }
        .txt-cont{
            position: absolute;
            background: darkblue;
            width: 100%;
            color: white;
        }

<div class="wrap">
        <div class="cont">
            cont
            <div class="txt">
                txt
                <div class="txt-cont">
                    txt-cont
                </div>
            </div>
            <div class="banner">
                banner
            </div>
        </div>
</div>

配置後のデフォルトの位置

固定属性と絶対属性の後のデフォルトの位置はすべて所定の位置にありますが、折り目に続く通常のドキュメント フロー要素が表示され、配置要素によってカバーされます。

z-index とは解決できない関係があります

Z-index については、次の章で詳しく紹介します。ここでは、位置が静的な値に加えてカスケード コンテキストを作成することのみを指摘します (z-index が の場合)。自動ではありません）。

1) z-indexが数値の場合、スタックコンテキストが作成され、サブ要素のスタック順序が参照として使用されます。

2) z-index が auto の場合、スタッキング コンテキストは作成されず、スタッキング順序は z-index:0 と一致します。