div가 모든 웹 페이지의 최상위 요소가됩니다.

현재 Chrome 용 오픈 소스 플러그인을 만들고 있습니다. 꽤 많이 끝났지 만, 내가 해결하려고하는 몇 가지 버그가 있습니다. 기본적으로 모든 웹 페이지에서 움직이는 div (페이지의 HTML에 삽입 됨)는 눈에 보이도록 최상위 요소 여야합니다. 이것은 z-index @ 999에 의해 달성됩니다. 그러나 일부 웹 페이지에서는 이것이 작동하지 않습니다!div가 모든 웹 페이지의 최상위 요소가됩니다.

내 머리 꼭대기에서 code.google.com에 로그인하면 메뉴 막대가 내 div를 오버레이합니다.

웹 개발자가 무엇을해도 주입 할 때 어떻게 강제로 최상위 순위에 올려야합니까? 나는 시도 아무 소용이 중요한

#ezselected { 
    -webkit-transition: all .2s ease-in-out; 
    -moz-transition: all .2s ease-in-out; 
    -o-transition: all .2s ease-in-out; 
    -ms-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out; 
    position:absolute; 
    border-radius: 15px; 
    z-index: 999; 
    -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 100, .80); 
    -moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 100, .80); 
    /*box-shadow: 0px 0px 15px 5px rgba(255, 255, 100, .80);*/ 
    pointer-events:none; /* Make click-able through the DIV (for example, if it's on top of something with an event with kb) */ 
}

P.S.!

여기 사업부 내 CSS입니다.

감사합니다.

출처

2012-12-06 aeharding

글쎄'z-index : 999'는 'z-index : 1000' 이상 ... – nnnnnn

이있는 다른 요소 위에 요소를 넣지 않을 것입니다. http :// /stackoverflow.com/questions/491052/mininum-and-maximum-value-of-z-index – lbstr

귀하의 z- 색인은 999입니다.이 경우에 다루려고하는 요소의 z- 색인 (.menuDiv 클래스가 첨부 된 요소)의 Z- 색인은 1001입니다. 999는 어떤 스트레칭도 아닙니다 최대 z- 인덱스 값 브라우저가 허용되므로 삽입 된 div는 여전히 더 높은 z- 인덱스 요소 아래에있게됩니다.

허용되는 z- 색인 값에 대한 설명과 최대 레벨 요소 (일반적으로 +2147483647)를 만들려고 할 때 무엇을 사용할지에 대한 질문은 Minimum and Maximum value of Z-INDEX을 참조하십시오.

당신은 당신이 이제까지이 요소는 아무것도에 의해 이상 적층하지 않으 알고 있다면 (주의 : 같은를 사용하여 잠재적 요소를 제외), 사용 :

z-index: 2147483647;

당신은 약간 낮은 것을 사용하는 것이 좋습니다 유연성을 유지하고 싶다면 경쟁 요소에 의해 계층화 될 수있는 몇 번쯤은 가치가있을 것입니다. Z- 색인 값이 최대 값에 가깝다면, 플러그인에서 일부 렌더링 문제를 일으킬 염려가 없다면, 위의 값보다 위에있는 모든 Z- 색인을 낮추는 스크립트를 작성할 수도 있습니다.

비슷한 상황이 발생하면 Chrome에 매우 훌륭한 기본 검사 도구가 있습니다. 문제를 일으키는 요소를 마우스 오른쪽 단추로 클릭하고 요소를 검사 한 다음 오른쪽 표시 영역에서 '계산 된 스타일'을 확장합니다. z-index는 추적하기가 까다로울 수 있습니다 ("View inherited"가 켜져 있더라도) : 정적 인 내부 요소가 아닌 적절한 div/etc를 선택해야합니다. 네가 발견 할 때까지 둥지에서 물러서십시오.

출처

2012-12-06 21:23:02 taswyn

팁 주셔서 감사합니다. 그 이론적 인 한계에 대해 듣기 엔 아주 멋지다. 불행히도 - 내 문제는 여전히 발생합니다 (캐시 등 지우기). z 레이어링에 영향을주는 요소가 무엇입니까? – aeharding

테스트하려면 codess.com/p/chromium 페이지에 CSS를 첨부했습니다. 그런 다음 ezselected id 특성을 사용하여 div를 추가하고 내부에 일부 테스트 텍스트를 넣었습니다. 그러나 너비와 위쪽을 무시하여 오른쪽 상단 메뉴 영역과 부분적으로 겹치는 지 확인했습니다. 시작한 z- 인덱스를 사용하면 메뉴 드롭 다운이됩니다. 그 (1001)에 대해 사용 된 Google의 위의 Z- 색인을 수정하면 문제가 해결되었습니다. 어떤 점에서 CSS를 대체 할 수있는 다른 요소가 있거나 정적 요소가 아닌 위치를 사용하는 내부 요소가 다른 경우 다른 Z- 색인을 사용하고있을 수 있습니다. – taswyn

렌더링 된 자신의 요소를 검사하고 계산 된 Z- 인덱스가 무엇인지 확인하십시오. – taswyn

div가 모든 웹 페이지의 최상위 요소가됩니다.

답변

관련 문제