[HTML/CSS] 06. CSS 5가지 position 속성값

🔍 1. static(기본값)

 

position: static;

 

• 기본 흐름에 따른 배치
• top, bottom, left, right이 적용되지 않는다.

 

 

 

🔍 2. relative

 

position: relative;
top: 10px; /* 현재 위치에서 15px 아래로 이동 */
left: 15px; /* 현재 위치에서 15px 오른쪽으로 이동 */

 

• 일반 흐름에 따른 배치
• 추가로 지정한 top, bottom, left, right 값에 따라 이동

 

부모 box 안에 배치하되, top과 left만큼 이동시킨다.

 

 

 

🔍 3. absolute

 

position:absolute;
top: 10px; /* 15px 아래로 이동 */
left: 15px; /* 15px 오른쪽으로 이동 */

 

• 상위 요소 중에서 relative라는 옵션을 가진 요소를 기준으로 배치
• 설정되지 않았으면 절대적인 위치(0,0)을 기준으로 지정한 top, bottom, left, right 값에 따라 이동

 

 

🔍 4. fixed

 

position:fixed;
top: 10px; /* 화면상에서 15px 아래로 이동 */
left: 15px; /* 화면상에서 15px 오른쪽으로 이동 */

 

• 화면을 기준으로 고정
• 스크롤을 내려도 설정한 정해진 위치에 고정

 

어떤 서비스에서 버튼이 스크롤 되어도 아이콘이 정해진 위치에 고정되어 있을때 사용!

 

 

 

🔍 5. sticky

 

position:sticky;
top: 10px; /* 화면상에서 15px 아래로 이동 */
left: 15px; /* 화면상에서 15px 오른쪽으로 이동 */

 

• 부모 컨테이너를 기준으로 고정
• 요소가 특정 스크롤 위치에 도달하면 고정되며, 부모의 경계를 벗어나면 다시 스크롤에 따라 움직인다.

 

fixed는 항상 같은 위치에 고정되지만, sticky는 부모 컨테이너 내 특정 위치에 고정된다는 차이점이 있다!