크롬 불투명 전환 Z- 인덱스 문제

각도 앱에서 작업 중이고 탐색 항목에 '.active'클래스를 추가 할 때 문제가 있습니다.크롬 불투명 전환 Z- 인덱스 문제

나는 상자를 클릭하면

는 기본적으로, 그것은 확장하지만 다음 상자의 일부가 활성 상자가 투명 거의처럼 보여주고있다 : 여기

이 문제를 보여줍니다 stackblitz 링크입니다. 내 활성 클래스의 Z- 인덱스는 1이고 불투명도는 1입니다.

Firefox에서는이 문제가없는 것 같습니다. 또한 이전에 동일한 기술을 사용하여 유사한 작업을 수행했습니다 (프레임 워크가없는 경우). 이 link은 해당 프로젝트의 예제를 보여줍니다.

내가 잘못했거나 Chrome 문제인지 잘 모르겠습니다. 나는 어떤 의견을 주셔서 감사합니다.

편집 : Edge에서 확인한 것과 같은 문제가 있습니다. 지금까지 파이어 폭스가이 문제가 존재하지 않는 유일한 브라우저 인 것처럼 보인다.

2017-11-17 Xavier

만에 position:relative를 추가 중 하나 .section a 또는 .active

예를 들면 :이 불투명 < 한 다음 요소는 실제로 "위"라는 것이다 경우로 클릭 된 요소가 보인다

.section a { 
    display: block; 
    width: 120px; 
    height: 80px; 
    opacity: .5; 
    transition: all .5s; 
    position:relative; 
}

이유 그 동안은 opacity: 0.5;입니다. "위에"그 뜻은 다음 요소가 DOM 트리 아래에 있으므로 이전 스택 (현재는 클릭 된 스택)보다 더 높은 스태킹 순서를 가짐을 의미합니다.

2017-11-17 17:11:01

감사합니다. – Xavier

답변