js에 의해로드 된 요소 상단에 그림 요소

Question

초보자가 여기 있습니다!

내 포트폴리오 사이트에 대한 템플릿을 다운로드하여 사용했습니다. 그것을 조정하려고 시도하면서, 바로 아래에 하나의 요소가 겹치기를 원했습니다. 나는 그런 그래서

.bottom-element, .bottom-element * { 
    z-index: 1; 
} 

.top-element, .top-element * { 
    z-index: 2; 
} 

내가 진짜 문제는 템플릿에 포함 된 자바 스크립트 파일과 관련이있다 생각처럼 요소와 자녀의 z 인덱스를 변경하는 등 여러 가지를 시도했다. 겹치는 부분을 최상위 요소는 콘텐츠 div에 대한 멋진 테두리 역할을하는 svg 경로이며, 겹치기를 원했던 부분은 js (image of the problem area)에 의해 제어되는 멋진 갤러리입니다. 초기 HTML/CSS 파일을 완료 한 후 스크립트가 실행되고 이미지가로드되는 것을 추측하고 있습니까? (그것에 대해 많이 알지 못합니다!)

갤러리 미리보기 이미지 위에 svg를 그릴 수있는 방법이 있습니까? 아니면 너무 복잡해서 신경 쓰지 않아도 될까요?

Answer 1

z- 색인은 위치가 지정된 요소 (위치 : 절대, 위치 : 상대 또는 위치 : 고정)에서만 작동하므로 먼저 확인하십시오.

일반적으로 위치 값을 지정하지 않으면 실제로 위치를 변경하지 않으므로 상대 경로를 추가합니다.