[ CSS ] Position 속성

🔥 Position 속성 실습링크 ( 클릭 ! )

Position속성이란

• position속성은 요소의 위치를 결정하는 속성이다.
• position속성에 들어가는 값으로는 relative, absolute, fixed, static, sticky가 있다.
• position 속성을 사용하는 방법은 먼저 position 값을 주고 top,bottom,left,right에 값을 넣어 주면 된다.
• 예를 들어 top: 20px을 주면 요소가 위에서 20px만큼 떨어지게 된다.
• 이제 각 속성값들의 특징을 살펴 보자.

1. relative & absolute

• relative는 일반적으로 부모 요소에 사용되는 속성이고, absolute는 자식요소에 사용 된다.
• 예를 들어 A요소를 relative를 주고, A안의 자식요소인 B에 absolute를 주면 요소 B에 top,bottom,left,right속성으로 위치를 지정을 할 때 A요소를 기준으로 움직이게 된다.
• 만약 부모 요소에 relative를 주지 않으면 브라우저를 기준으로 위치가 조정 된다.

2. fixed

• fixed는 브라우저를 기준으로 위치를 잡는다.
• fixed를 사용하면 요소를 문서의 흐름에서 제거 하여 지정한 위치에 요소를 고정시킬 수 있다.

3. static