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

fixed

div {
    position: fixed;
}

sticky

div {
    position: sticky;
    top: 0
}

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

div1 {
    position: relative;
}

div2 {
    /* position: static; */
}

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

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

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

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

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

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

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

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

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

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