Position

Position

이것을 잘 다루는 것이 CSS를 자유자제로 사용하는 것의 관건이다.

엘리먼트의 위치를 지정하는 방법은 4가지가 있다.

• static
• relative
• absolute
• fixed

static

우리가 아무런  position을 지정하지 않았을 경우 디폴드 값으로 static이 들어가 있다.

static은 reft,right,top,bottom 즉, offset값을 다 무시하고 원래 있어야 하는 곳, 부모의 안에 위치하게 하는 position속성이다.

relative

하지만 이런 원래 있어야 하는 곳을 기준으로, 부모를 기준으로 위치를 옮기고 싶다면 position을 relative로 설정해 주면 된다. 

css는 left값과 right 값이 겹칠 경우 left를 우선시하고 top/bottom은 top을 우선시 한다.

absolute

절대 포지션, 부모를 기준으로 자리를 옮기는 relative와 다르게 absolute는 html 문서를 기준으로 위치를 지정한다.(부모의 position이 static일 경우)

포지션을 absolute로 설정만 해 주고 아무런 위치 오프셋을 입력하지 않았을 경우, 엘리먼트는 자기의 위치에 있다. 하지만 이 값은 0이 아님,

0을 지정을 하면 html문서 기준으로 맨 왼쪽 상단으로 위치가 옮겨 가는 것을 볼 수 있다. 

부모는 position: absolute; 가 된 자식을 자식으로 인정하지 않기 때문에 parent element의 크기가 줄어든다.

그리고 가로 값을 설정을 하지 않았을 경우 부모의 width를 다 채우고 있던 자식element는 position: absolute; 이 되고 나서 부모와 무관해지기 때문에 컨텐츠의 크기에 사이즈를 맞춘다. 

부모의 position이 지정이 되었을 경우

position: absolute; 된 자식은 포지션이 지정이 된 부모를 기준으로 자신의 위치를 정한다.

fixed

고정된 포지션

스크롤과는 무관하게 화면상으로 일정한 위치를 유지하고 있다. 그래서 화면 옆에 사이드 바 같은 것을 스크롤을 내리더라도 계속 남기고 싶다면 fixed속성을 사용하면 된다.