[クイックキャンパスレッスン後記]フロントエンド100%返却チャレンジ25回

fixed

ブラウザ(ビューポート)ベースのレイアウト

の絶対値であってもよいが、固定値

を明確に宣言することが望ましい.

div {
    position: fixed;
}

sticky

に基づく転がり領域配置

正常に動作するには、

top、左、右、および下部の値を入力する必要があります:

IEは

をサポートしていません

div {
    position: sticky;
    top: 0
}

位置フィーチャー-要素のスタック順序

要素のスタック順序によって、ユーザーに近い要素(Z軸にスタック)が決定されます.
位置属性の値は

静的値を除き、一番上の値は

(値に関係なく)です.

div1 {
    position: relative;
}

div2 {
    /* position: static; */
}

すべての位置に

が存在する場合、z-index属性の値が高いほど、その累積量は

大きくなる.

div1 {
    position: relative;
    z-index: 10
}

div2 {
    position: relative;
    z-index: 9
}

div3 {
    position: relative;
    z-index: 8
}

の位置属性の値があり、z-index属性の値が同じである場合、「HTML」の最後のコード(要素)は

より上になります.

div1 {
    position: relative;
    z-index: 100
}

div2 {
    position: relative;
    z-index: 100
}

div3 {
    position: relative;
    z-index: 100
}

position > z-index > HTML마지막코드

位置フィーチャー-表示の変更

absolute、固定属性値を持つ要素表示属性の値の大部分がブロックに変更されました

flex、例えばinline-flex、属性効果なし

span {
    display: relative;
    width: 300px;
    height: 300px;
    /* 변화 없음 */
}

span {
    display: absolute;
    width: 300px;
    height: 300px;
    /* 변화 있음, width: 300px, height: 300px */
}

フロントエンドオールインワンパッケージショートカット->https://bit.ly/3m0t8GM