position 속성

요소의 위치를 지정하는 속성
position: static|absolute|fixed|relative|sticky|initial|inherit;

포지션(position)이란 이름처럼 요소들의 위치를 결정하는 스타일 속성입니다.
특히, 요소들을 겹치게 표현하거나 화면상의 특정 위치에 고정시키기 위해 자주 사용합니다.
position 속성은 좌표를 지정 해주기 위해서 left, right, top, bottom 속성과 함께 사용합니다.

• left : 문서 혹은 요소의 좌측에서 태그 좌측 좌표 거리
• right : 문서 혹은 요소의 우측에서 태그 우측 좌표 거리
• top : 문서 혹은 요소의 상단에서 태그 상단 좌표 거리
• bottom : 문서 혹은 요소의 하단에서 태그 하단 좌표 거리

그리고, position의 속성 값을 absolute 나 fixed 로 설정시 가로 크기가 100%가 되는 block 요소의 특징이 사라지게 됩니다.

속성값

• static
  • position의 속성 값을 아무것도 지정하지 않으면 사용되는 기본 값
  • 다른 요소와의 관계에 의해 자동으로 배치된다.
  • 보통은 사용할 일이 없으나, 앞에서 선언된 position의 속성값을 무효화시킬 때 사용.
  • top, right, bottom, left 의 속성값을 사용할 수 없다.
• absolute
  • 해당 요소의 위치가 지정된 부모 요소를 기준으로 해서 고정 시키는 것.(절대적인 포지션)
  • 해당 요소의 너비와 높이 값이 부모 요소에 반영되지 않는다. (독립적이다.)
• relative
  • 해당 요소가 기본적으로 표시된 위치를 기준으로 새로운 위치를 지정할 수 있다.(상대적인 포지션)
  • position 을 relative 로 지정하더라도 top 이나 left 등으로 새로운 위치를 지정하지 않는 이상 기본적으로 표시된 위치와 다르지 않다.
• fixed

    * 해당 요소의 위치를 사용자의 브라우저를 기준으로 설정할 수 있다. 
    * 스크롤을 내려도 항상 같은 곳에 위치하는 상단바, 하단바, 광고 등에 쓰인다.
  

▶ 예제실습코드 2-3 : position 속성(1)
▶ 예제실습코드 2-4 : position 속성(2)