CSS | position 속성 (static, relative, absolute, fixed)

position
position 사용법

---

position

position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정하며 top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다. 

 

position 사용법

static (기본값) : 위치를 지정하지 않을 때 사용한다.

relative : 요소 자기 자신을 기준으로 배치

absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.

fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다. 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.

---

static
static은 position 속성의 기본값이다. 요소를 나열한 순서대로 배치하며 float를 제외한 top, right, bottom, left와 같은 속성을 사용할 수 없다.

See the Pen test by yedio (@yedio) on CodePen.

---

relative
해당 HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식이다. 즉, position이 static 이었을 때 어느 위치였는지를 기준으로 상대적인 요소의 위치를 결정한다. 

🍳box2의 position을 relative로 설정한 뒤 static 위치였을 때를 기준으로 하여 위에서 30px, 오른쪽으로 100px 떨어진 예

See the Pen Test_css_position2 by yedio (@yedio) on CodePen.

---

absolute
absolute의 경우 부모 요소(relative, fixed, absolute가 되어있는 부모)를 기준으로 움직인다. 부모중에 relative, fixed, absolute인 태그가 없으면 body 태그가 기준이 된다.
* 아이콘이 포함된 검색창 같은 것을 구현할 때 용이하게 쓰일 수 있다.

🍳box1-relative / box2-absolution을 주었을 때, box2가 box1을 기준으로 위로10px, 왼쪽으로 10px 떨어진 예 

See the Pen Test_css_position3 by yedio (@yedio) on CodePen.

---

fixed
뷰포트(viewport)를 기준으로 위치를 설정하는 방식이다. 즉, 웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치하게 된다.
* header나, top버튼 등을 구현하는데에  쓰일 수 있다.

See the Pen Test_css_position4 by yedio (@yedio) on CodePen.