[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 25회차 미션

fixed

• 브라우저(뷰 포트) 기준으로 배치
• absolute 도 할 수 있으나, 명시적으로 fixed 를 선언해 주는 것이 좋음

div {
    position: fixed;
}

sticky

• 스크롤 영역 기준으로 배치
• top, left, right, bottom 중 하나의 값을 입력해야작동함
• IE 지원 불가

div {
    position: sticky;
    top: 0
}

position 특징 - 요소 쌓임 순서 (Stack order)

• 요소가 쌓여 있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지 (더 위에 쌓이는지)를 결정 (Z축)

1. static을 제외한 position 속성의 값이 있을 경우 가장 위에 쌓임(값은 무관)

div1 {
    position: relative;
}

div2 {
    /* position: static; */
}

2. position 이 모두 존재한다면, z-index 속성의 숫자 값이 높을 수록 위에 쌓임

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

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

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

3. position 속성의 값이 있고, 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마지막코드

position 특징 - display 수정

• absolute, fixed 속성 값이 적용된 요소는 display 속성의 값이 대부분 block 으로 수정됨
  • 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