Position

• 요소의 위치 지정

position: static;

• 기본 값

• 정적(static) 엘리먼트는 위치가 지정된 것이 아니라고 표현

  static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됐다고 표현
  

position: relative;

• 딱히 위치 이동 x ( 별도의 프로퍼티를 지정하지 않는 이상 )

• top, right, bottom, left 프로퍼티가 있어야 이동

  → top, right, bottom, left은 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티

        .클래스명 {
          position: relative;
          top: -20px;         # top의 값을 마이너스로 주면 위로 올라감.
        	left: 30px;         # 왼쪽에서 px값 만큼 떨어짐.
        }

→ 상대 위치가 지정된 엘리먼트에 top, right, bottom, left를 지정하면 기본 위치와 다르게 위치가 조정

다른 콘텐츠는 해당 엘리먼트에서 남긴 공백에 맞춰 들어가게끔 조정되지 않을 것

position: absolute;

• 가장 가까운 곳에 위치한 부모 엘리먼트에 상대적으로 위치 지정

  → 이를 제외하면 fixed와 비슷

  → 부모 엘리먼트가 없거나
  부모 엘리먼트가 position: static;인 경우(이 경우는 부모 엘리먼트를 빠져나온 뒤)

  문서 본문(document body)을 기준으로 삼고, 페이지 스크롤에 따라 움직임.

• 특정 부모에 대해 절대적으로 움직임

  → 일반적으로 절대적으로 움직이고 싶은 부모에게 position: relative;를 부여

  → 이 외에 position에 fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직임

• 다른 요소가 먼저 위치를 점유하고 있어도 뒤로 밀리지 않고 덮어쓰게 됨.

• absolute 값을 갖게 되면, 내용의 크기만큼만 가로크기가 됨. (block-element이더라도)

  → 그러나

        .블록요소 클래스명 {
          right: 0;
          left:0;
        	bottom: 0;
        }

• header안의 이미지 가운데로 위치 시키는 법

        img {
          position: absolute;
          left: 50%;          # 부모 너비만큼의 50%에 위치 (즉 이미지의 시작이 부모 너비의 정중앙).
          margin-left: -10px; # 이미지 크기의 절반 값을 빼줌.
        }

position: fixed;

• 고정됨을 의미

• 특징

  • 브라우저 화면 크기만큼, 화면 내에서만 움직임

  • 부모 불필요

  • top, right, bottom, left 프로퍼티 사용

  • 평소대로 라면 있었을 법한 공백을 페이지에 안 남김.

  • 모바일 브라우저는 고정 엘리먼트 지원이 매우 불안정함.

  • 일반적인 HTML 흐름이 아닌, 스크린 *뷰포트(viewport) 기준으로 offset이 적용

    • 뷰포트(viewport) : 웹페이지가 사용자에게 보여지는 영역

  • 고정 헤더나 푸터를 사용한다면 그것들이 들어갈 공간을 마련해 줘야 함.

    →ex. body에 margin-bottom 값 주기

position: fixed or absolute; 되면

• 주변의 요소에 상관없이 위치

• 해당 영역이 무의미해지면서 다른 요소들과 겹치게 됨.

  ⇒ 해결책

  ex. body와 header가 겹칠 경우

        body {
          padding-top: 48px;
        }