CSS position 속성

1. position

CSS의 position 속성은 HTML에서 element를 배치하는 방법을 지정하는 속성이다. position 속성에 쓸 수 있는 값은 static, relative, absolute, fixed, sticky 5개가 있다.

1-1. static(기본 값)

• static은 element가 문서(HTML)에서 일반적인 흐름을 따라 배치된다. element에 position을 지정하지 않았을 때 기본으로 적용되는 값이다. static의 경우 top, right, bottom, left 속성들을 사용해도 적용되지않는다.
  
  결과👇
• position을 설정하지않으면 기본값인 static임을 확인 할 수 있다.
  

1-2. relative

relative도 마찬가지로 일반적인 흐름에 따라 배치되지만 top, right, bottom, left 속성들을 이용해 기본값의 위치를 기준으로 위치 조절을 할 수 있다.

결과👇

• 자신이 배치되어있던 위치에서 top: 100px; left:100px;만큼 위치가 조절되는 것을 볼 수 있다. input의 position도 relative임을 확인할 수 있다.
  

1-3.absolute

• absolute는 element가 문서의 일반적인 흐름을 따르지 않고 가장 가까운 위치에 있는 부모 element를 기준으로 위치가 움직인다. 조상 element가 없으면 문서 본문(body)을 기준으로 삼고 페이지 스크롤에 따라 움직인다.
  결과👇
• first는 relative position이므로 기본값에서 top:100px; 떨어진 위치에 위치한 것을 볼 수 있고,
  second는 static position이므로 일반적 흐름에따라 배치되었고, absolute div는 absolute position이므로 relative position을 가지고 있는 가장 가까운 부모인 first를 기준으로 top:100px;떨어진 곳에 위치한 것을 볼 수 있다.
  

1-4. fixed

• fixed는 viewport를 기준으로 한 위치에 고정된다. 스크롤되어도 움직이지 않는 고정된 자리를 갖는다.
  부모 요소와 관계없이 브라우저의 viewport를 기준으로 top, bottom, left, right을 사용하여 위치를 이동시킨다.
• fixed position의 block요소 width는 inline 요소같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다