브라우저의 불투명도 또는 z- 인덱스는 무엇보다 중요합니까?

Question

나는 자바 스크립트에서 "팝업 창을"코딩 그리고 난 재미있는 일이 건너했습니다

팝업 창에서 해군 광장 나는이 숨겨 기대에도 불구하고 볼 수 있습니다 . 팝업이 사각형 뒤에 추가되었으므로 상단에 있어야합니다.

CSS opacity 네이비 사각형의 속성은 0.3입니다. 내가 시도한 것으로부터, (0,1) 간격의 모든 숫자가 동일한 결과를 얻는 것으로 보입니다. 1으로 변경하면 예상대로 동작합니다 (즉, 팝업 아래의 사각형 부분이 숨겨 짐).

z-index 속성을 사각형의 경우 10, 팝업의 경우 100으로 설정하려고했지만 아무 것도 변경하지 않습니다.

무엇이 누락 되었습니까? 왜 사각형의 일부가 표시됩니까?

테스트 브라우저 :

• 파이어 폭스 3.6.x에서
• 크롬 4

Answer 1

이것은 버그가 아니며 실제로는 을 어떻게 처리 할 예정입니까? elaborate description of Stacking Contexts에는 그것에 대해 언급이 없으므로 약간 혼란 스럽습니다. 그러나, 이러한 특정 잡았다 찾을 수 수 color module에 visual formatting module 링크 (강조 내) : 1 미만 불투명도 소자 이후

가 화상 오프 스크린 단일 에서 합성되고, 그 이외의 콘텐츠 못해 그 안에있는 콘텐츠 조각들 사이에 z- 순서 으로 계층화 될 수 있습니다. 동일한 이유 때문에 구현은 불투명도가 1 미만인 모든 요소 에 대해 새 스태킹 컨텍스트를 만들어야합니다. 불투명도가 1 미만인 요소가 위치하지 않으면 은 구현 한 레이어를 부모 스택 내에 으로 페인트해야합니다 문맥에 'z-index : 0'및 'opacity : 1'이있는 위치 지정된 요소 인 경우 이 사용되는 동일한 스태킹 순서로 정렬됩니다. 불투명도가 1보다 작은 요소가있는 경우 을 제외하고 'z-index'속성이 [CSS21]에서 설명한대로 적용됩니다. 새 스태킹 컨텍스트는 항상 이므로 'auto'는 '0'으로 처리됩니다. 스태킹 컨텍스트에 대한 정보는 에 대한 자세한 내용은 [CSS21]의 9.9 및 부록 E를 참조하십시오. SVG 요소에는 자체 렌더링 모델 ([SVG11], 3 장)이 있기 때문에이 단락의 규칙은 SVG 요소에 적용하지 않습니다 ( ).

Answer 2

당신은 너무 스타일이 적용에 변경되지 않습니다이 !important를 사용하여 같은 팝업 윈도우의 DIV를 설정하려고 할 수 새로운 스타일 또는 클래스 :

background-color: white !important; 
z-index: 100 !important; 
opacity: 1.0 !important; 

다음으로 새 CSS 클래스를 만듭니다.

.PopupElement 
{ 
z-index: inherited; 
opacity: inherited; 
} 

그리고 예를 들어 다음과 같이 윈도우의 모든 요소에 클래스를 추가 :

내 생각이 있기 때문에이 CSS를 적용에는 우선 순위 속성 없습니다 ... 같이 일 것입니다

<input value="posx" class="some_class PopupElement"/> 

내가 아는 한. =)

Answer 3

이 문제를 디버깅하려면 예제 코드가 필요할 수 있습니다.

에만 예를 들어, 그 DIV 내에서 그려 질에 모든 편집기 개체 요소를 강제하려고 둘러싸는 DIV에 overflow: hidden 가능성이 position: relative을 넣을 수

: 최후의 수단으로

<div style="overflow: hidden; position: relative"> 
    (Editor object buttons go here) 
</div> 

, 당신은 할 수 또한 두 요소 사이에 iframe을 시도하여 침투를 막으려 고 시도하십시오.

Answer 4

이 (CSS2 명세서에 z-index 참조) opacity 자신의 스택 문맥을 기준으로되는 z-index보다는 z-index보다 더 중요한 감정의 문제가 아니에요.

즉, z-index은 위치가있는 조상의 컨텍스트 내에서 중요합니다 (상대 위치, 절대 위치 또는 고정 위치). 문제를 해결하기 위해해야 ​​할 일은 팝업과 해군 사각형을 모두 포함하는 요소에 position: relative;을 추가하고 아마도 z-index: 1;을 추가하는 것입니다.캡쳐 화면을 보면 래퍼 div와 같은 최상위 요소 일 것입니다.

Answer 5

divs와 같은 두 요소에 대한 대안 : 상단 요소에 0.99 불투명도를 추가하고 둘 다 다시 설정됩니다.

opacity: 0.99; 

Answer 6

나는 동일한 문제가있었습니다. 색상/불투명도 대신 rgba를 사용하여 내 문제를 해결했습니다. 부트 스트랩 프레임 워크에서 LESS로 작업하면서 fade() 함수가 변환을 수행했습니다.