Position 속성

1.1. position

position 속성은 문서 상에 요소를 배치하는 방법

position 속성은 문서 상에 요소를 배치하는 방법이다. 즉, position만 잘 사용하면 모든 요소를 자유롭게 이동시킬 수 있다.

1.2. position type

• postion : stactic;
  모든 요소의 기본값으로 가장 일반적인 상태이다.

• position : relative;

1. 기준점이 되는 속성이다.
2. top, left, bottom, right로 위치를 조정할 수 있다. (단, position이라는 프로퍼티가 있을 때만 적용)
3. 다른 요소에 영향을 주지 않는다.

• position : absolute;

1. 부모 태그를 기준으로 절대적으로 움직이게 된다.
2. 부모 중 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다. (일반적으로, 기준이 될 부모에게 position : relative; 를 부여한다.)
3. position : absolute; 가 부여된 요소는 display : block;의 속성을 갖게 되지만, 페이지 전체를 width 값으로 갖진 않는다. ( 🧐 inline-block과 같은 속성을 갖게 되는 걸까?)
   따라서 right:0;, left:0; 값을 추가하였을 때, width: 100%; 값을 갖게 된다.

• position : fixed;

1. 말 그대로 요소를 페이지에 고정시킨다.
2. top, left, bottom, right의 값을 이용해서 고정할 위치를 설정한다.
3. 컨텐츠의 양이 많아져 scroll을 하게되어도 요소는 지정된 위치에 있다. (✏️ header(navigation), footer에 사용하면 적한 스타일이라고 생각한다 !)
4. 단, 주변의 요소와 관계없이 위치하게 되어 다른 요소들과 겹치는 상황이 발생한다. 따라서 겹치는 요소에 margin, padding을 활용하여 위치를 설정해야한다.