CSS position | z-index

CSS position

position은 태그들의 위치를 설정한다

 

기본값: static

 

문법

position: static | relative | absolute | fixed

static: 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓임

relative: 본인이 원래 있어야하는 위치(static) 기준

absolute: "static이 아닌" 가장 가까운 상위 요소 기준

  - 상위요소에 없다면 html 기준

fixed: 브라우저 가시영역 기준 (스크롤바 내려도 고정되어 있음)

 

 

*relative vs absolute : 위치를 잡을 때 기준점이 다르다

ex)

rel1 - ab1 - rel2 형제태그 일 때

rel1 위치 잡음

-> ab1은 부모 태그 위치를 기준으로 위치 잡음
-> rel2는 rel1을 기준으로 위치 잡는다

    ( =static기준 =차례대로 =왼->오 | 위->아래 )

 

 

 

CSS z-index

z-index는 요소의 수직 위치를 설정

 

position 속성 이용시 요소끼리 겹치는 경우가 있는데,

이 때 z-index를 통해 어떤 요소를 위로 올라오게 할지(수직 위치) 정할 수 있다.

 

문법

z-index: 정수값

- 숫자가 클 수록 위에 올라옴
- 형제 요소간의 위치를 정함
- 자식요소는 부모 요소와 같이 움직임