3분 안에 CSS의 z-index 속성에 대해 알아보세요.

css의 z-index 속성

프로젝트 작업을 할 때 레이어를 팝업하고 이 레이어에서 작업을 수행하는 데 자주 사용됩니다. 작업이 완료되면 팝업을 닫습니다. 레이어를 클릭하거나 다른 곳을 클릭하여 레이어를 끕니다.

보통 z-index 값은 p 스타일로 설정됩니다. 예를 들어 상위 레이어가 z-index: 100을 설정하면 하위 레이어는 100보다 크게 설정됩니다. 상위 레이어가 팝업되면 하위 레이어가 나타납니다. 표시될 수 있습니다.

예를 들어(간단히 작성):

9bd3d1511962ba90d1b141ee777f4b10
 c93057787d038d507f49406d37ba96e6
 94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

팝업 레이어를 닫습니다. $("#p1").hide(); //jquery.js 파일을 참조해야 합니다

다음을 수행할 수 있습니다. 상위 레이어의 나머지 부분도 클릭합니다. 상위 레이어를 숨기려면 p1에 이벤트를 추가하여 hide() 함수를 실행하기만 하면 됩니다. 그러나 이를 실행한 후 하위 레이어를 클릭했을 때, p1의 이벤트도 트리거되어 팝업 레이어가 닫힙니다. 이는 분명히 우리에게 필요한 효과가 아니며 분명히 p2에 대한 이벤트를 설정한 것입니다. 왜 트리거됩니까? 어떻게 해결하나요?

자식 레벨을 아무리 높게 설정해도 상위 이벤트가 발생하기 때문에 z-index를 10000으로 설정하면 작동하지 않습니다.

해결책:

$('#p2').click(function (e) {
            e.stopPropagation();
            return false;
        });

p2에 이벤트를 추가하고 "e.stopPropagation();"을 사용하여 버블링을 방지하면 p1 이벤트가 트리거되지 않습니다.

읽어주셔서 감사합니다. 많은 혜택이 있기를 바랍니다

이 기사의 출처는 다음과 같습니다: https://blog.csdn.net/lilinoscar/article/details/51860462

추천 튜토리얼: "CSS Tutorial "

위 내용은 3분 안에 CSS의 z-index 속성에 대해 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!