position

Position이란?

요소의 위치 지정 방법의 기준을 지정한다. 기준이 선택한 요소 “나”인가, “나”의 부모 요소인가, 브라우저를 기준으로 하는가, 스크롤 영역을기준으로 하는가를 설정한다.
position은 위치 지정 방법을 5가지 가지고 있다. = 속성값이 5개이다.
속성값들을 차례로 살펴보자

1. Static: 기준이 없음을 의미한다.

2. Relative : 기준이 “나” 자신이다. 예를 들어, 박스 a,b,c가 있다고 해보자. 여기서 b에게 {position: relative;}를 부여하고{top:10px;}을 준다면 박스b는 지금 있는 위치를 기준으로 위로 10px을 준다.
   추가적인 설명을 위해, 다시 웹페이지로 예를 들어보겠다.

다시, group1,2,3을 나란히 배치하려고 한다. {position: relative;}를 사용해서 움직여보자.
우선, group1,2,3 모두에게 {position: relative;} 속성을 부여하고 top,right,bottom,left 값을 적절히 주어 나란히 보이도록배치한다.

결과를 살펴보면 이러하다.

결과만 보면 그럴듯해보인다. 그러나, {position: relative;}로 레이아웃을 만드는 것은 굉장히 성가신 일이다. 적당한 위치에 가도록”적절한” 값을 주는 일은 시간도 오래 걸릴뿐더러 유지보수도 어렵다.
또한, {position: relative;}는 형제 요소로부터 영향을 받고 영향을 주기도 한다. 예를 들어, 위의 상황에서 group2 부분을 삭제한다고해보자.

group1과 3은 어떤 모습일까?

1,3 모두 자리를 유지하지 못하고 구조가 어긋났다. 왜 그럴까? {position: relative;}는 초기 자신의 위치로부터 이동하기 때문이다.처음 설정했던 group1과 group3사이에서 출발하기 때문에 필연적으로 서로 연관이 되어 있다.
따라서, 어느 하나를 삭제하면 형제 요소들의 구조를 다시 짜야하는 경우가 생긴다. 따라서 {position: absolute;}를 추천한다.

3. Absolute : 가장 가까운 상위 요소를 기준으로 한다. 그런데 이 가까운 상위 요소란, 단순히 부모 요소를 의미하는 것은 아니다.
   위의 예제에서 group들

4. Sticky : 스크롤 영역 기준으로 배치한다.

   5. Fixed : 브라우저를 기준으로 배치.(고정효과)

   -요소 쌓임 순서 :