Z- 색인으로 인해 문제가 발생했습니다.

Question

웹 사이트를 만들었지 만 이제는 1 개의 문제가 있습니다. 링크 및 탐색시에도 클릭을 할 수 없습니다.

당신은보십시오 : http://www.cambridgekitty.com/business-directory/ 실제 코드를 확인하십시오.

HTML

<div id="main-bg"> 
    <div id="left-side-logo"></div> 
</div> 

CSS

#wrap { 
    padding: 0; 
    position: relative; 
    width: 100%; 
} 
#main-bg { 
    background: url("../img/kittybg2-h.png") no-repeat scroll right top transparent; 
    margin: 0 auto; 
    min-height: 733px; 
    position: relative; 
    width: 100%; 
    z-index: -9999; 
} 

그냥 왼쪽에

#left-side-logo { 
    background: url("../img/norwichkitty-final-logo-bg-02.png") no-repeat scroll 0 0 transparent; 
    height: 500px; 
    left: -150px; 
    opacity: 0.8; 
    position: absolute; 
    top: -60px; 
    width: 500px; 
    z-index: -1; 
} 

을 로고를 추가하고

를 추가

position: relative; 

~ # 포장. 및 추가하십시오

z-index: -9999; 

~ # main-bg.

이 작업을 수행 한 후 ... 로고 또는 탐색 링크를 클릭 할 수 없습니다.

이 문제를 왜 저주하고 있는지 알려주십시오.

당신이 일을 정확히 모르는 경우

Answer 1

, 나는 간단한 변경 요소가 나는 서로 다른 배경 이미지를 적용합니다. 도시 이미지 배경을 #inner-wrapper, 로고 배경을 #main-bg으로 지정하십시오. 그런 다음 background-position 속성을 사용하여 로고 배경 (현재는 background 규칙에있는 두 개의 0)을 배치합니다. 또한 해당 로고에 불투명도를 원한다면 Photoshop 또는 선호하는 편집기를 사용하여 간단하게 설정할 수 있습니다.

이 솔루션은 몇 가지 컨테이너가 있지만 z-index 문제를 처리 할 필요가없고 더 많은 해킹 및 의미있는 마크 업을 만들 수 있음을 의미합니다. 희망이 도움 :)

Answer 2

부정적인 z-index를 사용하지 마십시오 감사합니다. 양수 값을 사용하고 #left-side-logo의 z-index을 더 높은 값으로 설정하면됩니다.

#wrap은 음수가 z-index이므로, 후자의 스태킹 색인에 #inner-wrapper의 내용 뒤에 있습니다.

은 참조 : 내가 당신이라면

• W3C: CSS2.1: 9 Visual formatting model (Section z-index)