css 배치 | position

1st revised - 2022년 9월 20일
2nd revised - 2022년 9월 30일

💡CSS Position

요소의 위치 지정 기준
position 속성은 HTML 요소를 배치하는 방법을 지정한다.
속성으로는 top, bottom, left, right, z-index를 사용할 수 있으며 모두 음수를 사용할 수 있다.

• static (기본값)
  static은 요소가 HTML 문서에서 일반적인 흐름을 따라 배치가 되게하며, 기본값이다.
  기준 없음
  
  

• relative
  요소 자기 자신을 기준으로 배치
  static과 마찬가지로 요소가 문서의 일반적인 흐름에 따라 배치되게 한다. static과 차이점은 요소가 자신의 static 위치에서 top right bottom left와 같은 속성에 의한 상대적인 위치에 배치된다는 점이다.
  
  

• absolute
  위치상 부모 요소를 기준
  absolute는 요소가 문서의 일반적인 흐름을 따르지 않게한다. absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직인다.
  만약 부모 중에 포지션이 값이 없다면 (== relative, absolute, fixed인 태그가 없다면) 가장 위의 태그(뷰포트)가 기준이 됨.
  
  

• fixed
  뷰포트(브라우저)를 기준
  fixed 역시 absolute와 마찬가지로 요소가 문서의 일반적인 흐름에서 제거된다. 대신, 스크린의 뷰포트(viewport)를 기준으로 한 위치에 배치된다. 즉, 스크롤되어도 움직이지 않는 고정된 자리를 갖게 된다.

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

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

  -top속성을 적용해야 스크롤 임계점에서 고정이됨.
  -top, left, right, bottom 속성 중 하나는 정해줘야 한다.

    
> ❗️ position fixed 와 sticky 차이
- fixed : viewport에 고정 되어 있는 것이고 스크롤을 내려도 원하는 위치에 고정. 예) 스크롤과 상관없이 계속 위 상단에 고정되는 Header
- sticky - 보기로 스크롤하고 특정 지점에 도달하면 멈추고 싶은 것이 구체적으로 있을 때.
  
  <br>

### 📌위치 속성

요소의 각 방향별 거리 지정
position 속성이 배치하는 방법이라면 top left bottom right 속성은 요소를 원하는 곳으로 최종적으로 위치 시키는 속성이다. 이 속성은 `position: static;` 에서는 적용되지 않는다.
기본값은 auto로 브라우저가 계산하며
단위는 px, em, rem 등 단위로 지정한다.
- `top`
- `left`
- `bottom`
- `right`
<br>

    
### 📌요소 쌓임 순서 (stack order)
어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정
1. 요소에 position 속성의 값이 있는 경우 위에 쌓임 (기본값 static제외)
2. 1번 조건이 같은 경우 `z-index` 속성의 _숫자 값이 높을 수록_ 위에 쌓임
3. 1,2 번 조건까지 같은 경우 HTML의 다음 구조일 수록 위에 쌓임

`z-index`
어느 HTML 요소가 앞으로 나오고, 뒤에 나올지 배치 순서를 결정하는 속성.
기본값은 auto(=0), 숫자가 높을 수록 위에 쌓인다.
z-index는 position (relative, absolute, fixed)속성이 적용된 요소에서만 작동한다.
    
>요소의 display가 변경됨
position 속성의 값으로 absolute, fixed가 지정된 요소는, display 속성이 block으로 변경된다. relative는 상관 없음