🤔 CSS의 position 이란?
CSS에서 position은 글의 흐름에서 벗어나서 요소를 자유롭게 배치할 때 쓰는 속성이다. HTML 문서 상에서 요소가 배치되는 방식을 결정한다. position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용된다.
위치의 기준(position)
top, left, bottom, right 속성으로 위치를 정한다.
네 가지 속성의 값이 모두 같은 경우 inset 속성을 사용한다.
1. static(default)
- position 속성의 기본 값
- 원래 있어야 할 위치에 배치
- 일반적인 글의 흐름을 따른다.
2. relative
- 상대적인
- 원래 위치를 기준으로 거리 이동 후 배치
- 원래 위치는 그대로 비워둔 채 차지
3. absolute
- 가장 가까운 (static이 아닌 나머지 position 설정이 된) 조상 요소를 기준으로 배치
- 조상 요소가 없고, 해당 요소에 내용이 없으면 출력이 되지 않음(width 지정 要)
=> 자리를 차지하지 않음
4. fixed
- 브라우저 화면을 기준으로 고정된 배치
- 해당 요소에 내용이 없으면 출력이 되지 않음(width 지정 要)
=> 자리를 차지하지 않음
- 내비게이션에 주로 사용
5. sticky
- 원래 위치에서는 static처럼 배치
- 일정 거리 이동 후(스크롤) fixed처럼 고정되어 배치(부모 요소 限)
- z-index 사용
🔎 z-index
요소의 앞뒤 순서 지정 시 사용, 숫자가 클수록 화면 앞으로 출력된다.
(아래에 있는 요소가 앞으로 출력되는 성질 수정 用)
Cho