CSS : Position 속성

목차

1. position 속성

2. static (기본값)

3. relative (상대 위치)

4. absolute (절대 위치)

5. fixed (뷰포트 고정 위치)

6. sticky (스크롤 고정 위치)

---

1. position 속성

posicion은 요소의 위치를 직접 지정하는 속성이다.

요소를 문서 흐름(inlin)에서 벗어나서 특정 요소를 기준으로 원하는 위치에 배치할 수 있다.

 

position의 속성값은 아래 5가지가 있다.

값	설명
static (기본값)	HTML에 작성된 순서대로 배치됨
relative	요소의 원래 위치를 기준으로 배치
absolute	가장 가까운 relative, absolute, fixed 조상 요소 기준으로 배치
fixed	뷰포트 기준으로 배치
sticky	스크롤 위치 기준으로 배치

 

---

2. static (기본값)

HTML 문서 흐름에 따라 배치 되며, top, left 같은 위치 지정 속성이 무시된다.

div {
    position: static;
    top: 10px;	/* 무시됨 */
}

---

3. relative (상대 위치)

요소를 요소 자신의 원래 위치 기준으로 이동한다.

문서 흐름상의 자기 자리를 유지하며 이동하므로, 주변 레이아웃에 영향을 주지 않는다.

div {
    position: relative;
    top: 10px; left: 20px;
}

---

4. absolute (절대 위치)

가장 가까운 positiondl relative, absolute, fixed인 조상을 기준으로 위치한다.

문서 흐름에서 제외되어 자리를 차지하지 않는다.

조상 중 기준 요소가 없을 경우, html을 기준으로 위치한다.

.parent { position: relative; }

.child {
    position: absolute;
    top: 0; left: 0;
}

---

5. fixed (뷰포트 고정 위치)

뷰포트(브라우저 화면)를 기준으로 위치한다.

스크롤을 해도 항상 같은 위치를 유지하며, 문서 흐름에서 제외된다.

div {
    position: fixed;
    bottom: 0; right: 0;
}

주로 네비게이션 바, 플로팅 버튼 등에 사용한다.

 

---

6. sticky (스크롤 고정 위치)

특정 기준을 넘기기 전까지는 relative, 이후에는 fixed처럼 동작한다.

스크롤 위치에 따라 요소가 고정되었다가 해제되며, 부모 요소의 높이를 벗어나면 sticky가 해제된다.

div {
    position: sticky;
    top: 0;
}

 

 

 

 

참고

codeit