왜 'translate3d'가 절대 위치 요소가 겹쳐서 Z-색인 순서를 깨뜨리나요?

Webkit Transform Translate3d의 Z-색인 변칙

지정된 z-색인 값을 가진 절대 위치에 있는 두 개의 div 요소가 겹치는 시나리오에서 다음을 적용합니다. Translate3d 웹킷 변환을 통해 화면에 애니메이션을 적용하면 Z-색인이 중단될 수 있습니다. ordering.

설명

translate3d를 사용할 때 요소는 3차원 렌더링 평면에 들어가며 여기서 Z-색인은 관련이 없습니다. 변환은 요소를 z축을 따라 이동하여 기존의 2D 스택 순서를 깨뜨립니다.

해결책

z-색인 순서를 복원하려면:

1. Transform-style: flat;을 설정하여 하위 요소에 대한 2D 렌더링으로 다시 전환합니다. 이렇게 하면 요소가 마치 평평한 2D 공간에 있는 것처럼 동작하게 됩니다.

element.css({ 'transform-style': 'flat' });

추가 참고 사항

• 이 문제와 관련이 있을 수 있습니다. Webkit 버그 #61824.
• 이 솔루션은 iPhone/iPad 및 Android 브라우저에서 작동합니다. Webkit 전환을 지원합니다.
• translate3d의 세 번째 매개변수를 다른 값으로 설정해도 3D 공간의 스택 순서 문제는 해결되지 않습니다.

위 내용은 왜 'translate3d'가 절대 위치 요소가 겹쳐서 Z-색인 순서를 깨뜨리나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!