마크업 언어/CSS

[CSS] fixed / relative 선언 z-index 차이

KIMJAVAN 2024. 1. 24. 19:20
728x90

position fixed 

position relative

 

가 차례로 선언되어있는 각각의 div가 있다 

 

기본적으로 요소가 html 에 나오는 순서대로 스택순서가 결정이 된다. 즉 나중에 선언된 요소가 더 위에 렌더링 되고 있는 것이다. 

 

!! 잘못 알고 있었던 부분

position fixed를 선언하면 다른 position 요소들 보다 위에 보일 거라고 생각했는데 (z-index를 선언한 것처럼)

fixed를 선언하고 z-index를 추가로 선언해야 앞에 올라와서 따라오는 효과를 낼 수 있다.

 

fixed를 맨 처음 선언하고 밑에 다른 position 요소들을 만들면 position 요소들 뒤로 뷰포트에 고정되어 따라온다.