CSS 속성 알아보기 (배치)

 

position

 

position: 값;

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky; /* 스크롤 영역 기준 */

요소의 위치 지정 기준을 지정하는 속성

 

기본값(static) - 기준 없음

relative - 요소 자신을 기준

absolute - 위치 상 부모 요소를 기준

fixed - 뷰포트(브라우저)를 기준

 

position 속성의 값으로 absolute, fixed 가 지정된 요소는, display 속성이 block으로 변경됨

 

top, bottom, left, right

 

/* position과 같이 사용하는 CSS 속성, 음수도 사용 가능하다 */
top: 값;
bottom: 값;
left: 값;
right: 값;

요소의 각 방향별 거리를 지정하는 속성

 

기본값(auto) - 브라우저가 계산

단위 - px, em, rem 등 단위로 지정

 

요소 쌓임 순서 (Stack order)

 

어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정

 

1. 요소에 position 속성의 값이 있는 경우 위에 쌓임 (기본값 static 제외)

2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임

3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임

 

z-index

 

z-index: 값;

z-index: 1;

요소의 쌓임 정도를 지정

 

기본값(auto) - 부모 요소와 동일한 쌓임 정도

숫자 - 숫자가 높을 수록 위에 쌓임