고정 헤더 영역
상세 컨텐츠
본문
position 특징 1. 좌표이동 가능
2. 붕 뜨게됨
relative , absolute
position : relative
기준을 선언하는 코드
position: absoulute
부모가 relative가 있을경우에는 기준을 부모로 잡는다
위 사진은 부모를 relative로 기준점을 잡고 bottom : 0 ; 을 실행하면 그 기준의 맨 아래로 위치하는것을 볼 수 있다.
부모의 relative 기준점을 제거 하고 그대로 실행해보면 웹브라우저 ( viewport ) 가 기준인 것을 볼 수 있다.
------------------------------------------
static, fixed
position: static
기준점이 없다 top, bottom, right, left 좌표 이동 불가능
position: fixed
스크롤을 위아래로 움직여도 웹브라우저 ( viewport )를 기준으로 고정된다
------------------------------------------
position: sticky
fixed처럼 동작하다가 설정한 범위를 벗어나면 absolute 처럼 동작함
------------------------------------------
z-index : n ;
position을 사용하면 붕뜨게 되는데 겹칠때 우선 순위로 보이는 순서를 정하는 것이 z-index
숫자가 높을수록 더 높은 우선순위
'CSS' 카테고리의 다른 글
| [CSS] animation, @keyframes (2) (0) | 2022.05.19 |
|---|---|
| [CSS] transform, transition ( 1 ) (0) | 2022.05.18 |
| [CSS] 선택자(pseudo class) nth-child, first/last-child, not, before/after (0) | 2022.05.15 |
| [CSS] 한줄, 두줄이상 ...처리 (0) | 2022.05.15 |
| [CSS] grid 레이아웃 (0) | 2022.05.13 |
