2023.06.02) position의 사용법

1. position

• CSS의 속성중 하나
• 웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성
• position 속성을 이용하여 텍스트나 이미지같은 요소들을 원하는 곳에 위치
• position의 종류 5가지
  
  • static
  • relative
  • fixed
  • absolute
  • sticky

 

1) static

• static은 원래 있어야할 위치이며 기본값
• position속성의 기본 값
• 다른 요소와의 관계에 의해 자동으로 배치
• top, left, right, bottom등의 offset 값을 지정 불가

2) relative

• relative는 static인 상태에서의 위치를 기준으로 top, right, bottom, left로 지정된 거리만큼 이동하여 위치
• 원래 있던 위치를 기준으로 좌표를 지정
• 원래 있던 위치는 position : static(default) 이었을 때를 기준으로 좌표를 지정

3) absolute

• absolute는 가장 가까운 static이 아닌 포지션을 가진 부모에 대해 상대적인 위치를 가짐
• 포지션을 가지는 부모가 없다면 body에 대해 상대적인 위치를 가짐
• 원래 위치와 상관 없이 절대 좌표와 함께 위치를 지정 가능
• absolute 속성은 기준점이 중요
• absolute는 position 값이 static이 아닌 것 중 가장 가까운 요소(부모태그)를 기준

4) fixed

• fixed는 위치를 지정하면 뷰포트(현재 화면에 보여지고 있는 직사각형의 영역, 전체화면)에 대해서 상대적인 위치를 차지함
• absolute속성과 비슷하게 문서의 흐름과 상관없이 절대 좌표와 함께 위치를 정해줌
• 기준점은 뷰포트의 왼쪽 위 꼭지점으로 함

5) sticky

• sticky는 사용자의 스크롤 위치를 기반으로 배치됨
• relative처럼 동작하다가 화면이 스크롤되어 요소가 화면 밖으로 벗어나려고 하면 fixed처럼 동작하여 뷰포트에 고정함
• sticky는 기준점을 넘지 않을 때는 relative처럼 동작하다가 기준점을 벗어나면 fixed처럼 동작함
• scroll이 계속되면 마지막 위치에서 멈춤
• 일반적인 상황에서 sticky속성의 기준점은 부모요소가 됨