내 div 중 하나에서 앵커를 누를 수 없습니다

Question

내 div 중 하나에서 앵커도 제대로 작동하지 않습니다. 그것들은 그들이 예정되어있는 방식대로 표시되지만, 나는 그것들을 전혀 누를 수 없으며, 보통의 텍스트/그림처럼 행동합니다. 이 div는 위의 투명한 div (위의 투명하지 않은 텍스트)가 있어야하므로 z-index을 -2으로 설정합니다.

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

이제 z-index: -2을 삭제하면 앵커와 양식을 누를 수 있습니다. 하지만 그런 식으로 투명 시스템이 망가졌습니다.

z-index 속성을 제거하지 않고 앵커 및 입력 양식을 클릭 할 수있게하려면 어떻게해야합니까? 그리고 z-index 앵커의 기능을 파괴 할 수있는 이유는 무엇입니까?

Answer 1

이 앵커 불투명 DIV 텍스트를 속이는 위에 투명한 사업부를 속이는 위에 불투명 사업부를 가지고하려면

div.transparent::after{ 
    content: ''; 
    background-color: black; 
    opacity: 0.7; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
} 

div.non-transparent{ 
    position: relative; 
    z-index: 0; 
} 

긍정적이나 부정적인 어느 값이 양의 Z-인덱스 I 투명성이 사라했다는 의미에서 내가 한 음화 (비 투명 사업부에 근무 : 나는 그런 값와 Z-인덱스가 필요 내 앵커는 클릭 할 수 없음).

Answer 2

부정적인 의미는 z-index입니다. 본질적으로 실제 표면 아래라고 말하기 때문에 클릭 할 수있는 기능이 자동으로 제거됩니다. 유리 벽을 들여다 보는 것과 같습니다.

대안이되고 적절한 해결책은 다른 요소의 Z- 색인을 증가 시켜서 해당 요소가 뒤에 있어야하는 요소 위에 놓 이도록하는 것입니다.

본질적으로 항상 z- 색인으로 아래로 내려 가지 마세요.

(참고 : 훨씬 더 긴과의 심도있는 답변을 this article from Smashing을 확인해보십시오.)