스크롤 시 상단 고정 헤더 위로 슬라이더 이미지가 겹쳐보이는 문제

이미지 슬라이더의 z-index 보다 고정 헤더(fixed header)의 z-index 값을 더 크게 설정하여 해결 

 

기본적으로 z-index 속성이 적용되지 않은 요소 간에는 HTML 문서 상에서 나중에 나오는 요소가 먼저 나오는 요소보다 위로 올라오도록 되어 있음.

z-index가 없을 때 요소 간 상대적 깊이는 HTML 문서 상에서 요소가 나오는 순서와 각 요소의 position 속성이 static이냐 아니냐에 따라서 결정된다.

• position 속성이 static이 아닌 요소는 무조건 position 속성이 static인 요소 위로 배치.
• position 속성이 static인 요소 간에는 HTML 문서 상에서 나중에 나오는 요소가 먼저 나오는 원소 위로 배치.(늦게 나오는 순)
• position 속성이 relative나 absolute, fixed, sticky인 요소 간에는 HTML 문서 상에서 나중에 나오는 요소가 먼저 나오는 원소 위로 배치.

z-index 속성을 사용하면 위에서 다룬 기본적인 규칙을 무시하고 HTML 문서 상에서 먼저 나온 요소를 나중에 나온 요소보다 앞으로 나오게 할 수 있다.

 

브라우저는 z-index 속성값이 낮은 요소를 먼저 그리고, z-index 속성값이 높은 요소를 나중에 그림.

-> 요소가 겹쳐있을 경우 z-index 속성값이 큰 요소가 z-index 속성값이 작은 요소의 일부를 가리거나 전체를 덮을 수 있다.

(z-index)속성값이 큰 요소

 

z-index 값을 아무리 올려도 작동이 안 될 때

* 부모와 자식 모두 position:absolute; 가 적용되어 있는 경우에는 자식의 z-index 값을 아무리 올려도 부모를 벗어나서 적용될 수 없다.

 

 

http://www.webmadang.net/script/script.do?action=read&boardid=3002&page=1&seq=39

https://www.daleseo.com/css-z-index/