Position 속성

📍 position 속성

HTML 요소를 배치하는 방법을 지정한다.

• static(default 값) : 요소가 HTML 문서에서 일반적인 흐름을 따라 배치가 되게 한다.
• relative : static 과 마찬가지이다.
  BUT, 차이점은 요소가 자신의 static 위치에서 top,right,bottom,left 와 같은 속성에 의한 상대적인 위치에 배치된다는 점. (static 은 불가)
• absolute : 요소가 문서의 일반적인 흐름을 따르지 않게 한다.
  - position: static 속성을 가지고 있지 않은 부모를 기준으로 움직인다.
  • 만약,부모 중 포지션이 relative,absolute,fixed 인 태그가 없다면 가장 위의 태그(body) 가 기준이 된다.
• fixed : absolute 와 마찬가지로 요소가 문서의 일반적인 흐름에서 제거된다.
  - 대신, 스크린의 뷰포트를 기준으로 한 위치에 배치된다.
  • 즉, 스크롤되어도 움직이지 않는 고정된 자리를 갖게 된다.

🧷 뷰포트(viewport) 란? 웹 페이지가 브라우저 화면상에서 실제로 표시되는 영역

• sticky
  요소가 HTML 문서안에서 static 과 같이 일반적인 흐름에 따라가다가 스크롤 위치가
  임계점에 이르면 fixed 와 같이 박스를 화면에 고정할 수 있는 속성이다.

📍 위치 속성

position 속성이 배치하는 방법이라면
top left bottom right 속성은 요소를 원하는 곳으로 최종적으로 위치 시키는 속성이다.
이 속성은 position : static; 에서는 적용되지 않는다.

📍 관련 속성

• z-index : 어느 객체가 앞으로 나오고, 뒤에 나올지 배치 순서를 결정하는 속성이다.
  - position(relative, absolute, fixed) 속성이 적용된 요소에서만 작동한다.

🧷코드 예시

div.relative {
        position: relative;
        bottom: 120px;
        right: 20px;
        z-index: 1;
      }

🧷 출력 결과
-> 뒤에 있던 relative 박스가 absolute 보다 앞에 오게 한다.