반응형
positon : 요소의 위치 지정 기준
static(기본값) : 기준 없음
relative : 요소 자신을 기준
absolute : 위치 상 부모 요소를 기준(위치 상 부모 요소를 꼭 확인해야 함)
fixed : 뷰포트(브라우저)를 기준
sticky : 스크롤 영역 기준
*position과 같이 사용하는 css 속성들(모두 음수를 사용할 수 있음)
- top, bottom, left, right, z-index
top, bottom, left, right : 요소의 각 방향별 거리 지정
auto(기본값) : 브라우저가 계산
단위 : px, em, rem 등 단위로 지정
- ex) 원래 자신의 위치를 기준으로 상30px, 좌30px
position: relative;
top : 30px
left : 30px
(개발할 때 자기 자신을 기준으로 배치하는 일은 알아보기 쉽지 않기 때문에 거의 사용하지 않음)
- 가장 많이 사용하는 속성은 부모요소 기준으로 배치를 하는 absolute 속성
요소 쌓임 순서(Stack Order)
어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정
1. 요소에 position 속성의 값이 있는 경우에 위에 쌓임( 기본값 static제외)
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임