CSS 항상 맨 위로

Question

화면 상단에 고정 된 이미지가있는 웹 사이트가 있습니다. 내 페이지를 아래로 스크롤하면 이미지가 맨 위에 있어야합니다. 그러나 아래의 모든 콘텐츠가 내 이미지와 겹치고 덮여집니다.

상단 표시 줄 (이미지)을 항상 맨 위에 표시하려면 어떻게합니까? 페이지를 스크롤 할 때 페이지의 내용을 포함하고 싶습니다.

Answer 1

position이 귀하의 구성 요소에 있는지 확인하고 z-index을 덮고 싶은 요소보다 높은 값으로 설정하십시오.

element { 
    position: fixed; 
    z-index: 999; 
} 

div { 
    position: relative; 
    z-index: 99; 
} 

아마도 그보다 더 많은 작업이 필요할 것이지만 코드를 게시하지 않았으므로 시작일 것입니다.

Answer 2

같은 마크 업이 보이는 것을 가정 : 이제 두 요소가 위치

<div id="header" style="position: fixed;"></div> 
<div id="content" style="position: relative;"></div> 

; 이 경우 맨 아래의 요소 (소스 순서대로)는 위 요소를 소스 순서로 포함합니다.

헤더에 z-index을 추가하십시오. 1으로 충분해야합니다.