CSS
[CSS] position(absolute, relative, fixed, sticky), z-index
혀누쓰0
2022. 5. 15. 23:30
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