다른 요소 위에 요소를 변형 시키십시오.

Question

저는 CSS3 3D 변형을 사용하는 것을 배우고 있지만 다른 모든 요소 위에 변형되는 요소를 유지하는 데 문제가 있습니다. 당신이 볼 수 있듯이, 사이트가 세 개의 셀에만 된 div의 계층 구조에 대한 표준 Z- 인덱스 규칙을 다음과 http://bos.rggwebdesigns.com/

, 첫 번째 행의 카드는 뒤에있는 의미 :

이

내가 지금까지 무엇을 가지고 두 번째 줄의 카드 등등.

클릭 한 .card 요소 위의 .row 요소를 선택하고 해당 z- 인덱스를 1000으로 설정하는 변형 스크립트 (main.js)에 줄을 추가하려고 시도했지만 작동하지 않는 것 같습니다.

$(document).ready(function() { 
    $('.card').click(function() { 
     $('.row').removeClass('top'); 
     $('.card').not(this).removeClass('flipped'); 
     $(this).parents().eq(2).toggleClass('top'); 
     $(this).toggleClass('flipped'); 
    }) 
}); 

다시 말해서, 저는 변환 요소의 모든 부분이 항상 다른 모든 요소 위에 나타나도록 노력하고 있습니다.

Answer 1

내가봤을 때 z- 색인은 상대적이어야합니다. 따라서 문제를 해결해야하는 "행"클래스에 position : relative;을 설정하면

편집 : 코드를 검토하고있었습니다. .row.top을 CSS로 변경해야합니다. .top