IE7 Z-Index 계층화 이슈
를 했습니다 의 했습니다 의 작은 테스트 z-index버그, 하지만 어떻게 고쳐야 할지 모르겠습니다.저는 계속 같이 놀았습니다.z-index ㅜㅜ
무슨 문제가 있습니까?z-indexIE7에서?
테스트 CSS:
input {
border: 1px solid #000;
}
div {
border: 1px solid #00f;
}
ul {
border: 1px solid #f00;
background-color: #f00;
list-style-type: none;
margin: 0;
padding-left: 0;
z-index: 1000;
}
li {
color: #fff;
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
span.envelope {
position: relative;
}
span.envelope ul {
position: absolute;
top: 20px;
left: 0;
width: 150px;
}
HTML 테스트:
<form>
<label>Input #1:</label>
<span id="envelope-1" class="envelope">
<input name="my-input-1" id="my-input-1" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</span>
<br><br>
<label>Input #2:</label>
<span id="envelope-2" class="envelope">
<input name="my-input-2" id="my-input-2" />
</span>
</form>
Z-index는 절대적인 측정이 아닙니다.z-index: 1000인 요소는 z-index: 1인 요소 뒤에 있을 수 있습니다 - 각 요소가 서로 다른 적층 컨텍스트에 속하기만 하면 가능합니다.
z-index를 지정하면 동일한 스태킹 컨텍스트에서 다른 요소에 대해 상대적으로 지정하는 것이며, Z-index에 대한 CSS 사양의 단락에서는 자동이 아닌 z-index를 가진 위치된 콘텐츠에 대해서만 새로운 스태킹 컨텍스트가 생성된다고 하지만(문서 전체가 단일 스태킹 컨텍스트여야 함을 의미함),포지셔닝 스팬을 구성했습니다. 안타깝게도 IE7은 z 인덱스가 없는 포지셔닝 컨텐츠를 새로운 스태킹 컨텍스트로 해석합니다.
간단히 말해서, 다음 CSS를 추가해 보십시오.
#envelope-1 {position:relative; z-index:1;}
또는 사용자의 스팬에 위치가 없도록 문서를 다시 디자인합니다. 더 이상:
<html>
<head>
<title>Z-Index IE7 Test</title>
<style type="text/css">
ul {
background-color: #f00;
z-index: 1000;
position: absolute;
width: 150px;
}
</style>
</head>
<body>
<div>
<label>Input #1:</label> <input><br>
<ul><li>item<li>item<li>item<li>item</ul>
</div>
<div>
<label>Input #2:</label> <input>
</div>
</body>
</html>
이 버그의 유사한 예는 http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ 을 참조하십시오.상위 요소(예: 엔벨로프-1)에 높은 z 인덱스를 부여하는 것은 엔벨로프-1(메뉴 포함)의 모든 자식이 엔벨로프-1(특히 엔벨로프-2)의 모든 형제자매와 겹치기 때문입니다.
z-index를 사용하면 사물이 어떻게 중첩되는지 명시적으로 정의할 수 있지만 z-index가 없어도 계층화 순서는 잘 정의됩니다.마지막으로 IE6에는 선택 상자와 iframe이 다른 모든 것 위에 떠다니게 하는 추가 버그가 있습니다.
http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/
$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
IE에서 포지셔닝된 요소는 z 인덱스 값 0으로 시작하는 새로운 스태킹 컨텍스트를 생성합니다.따라서 z-index가 제대로 작동하지 않습니다.
버그를 수정하려면 상위 요소에 더 높은 z-index 값(자녀의 z-index 값 자체보다 높을 수 있음)을 부여합니다.
저는 이 문제에 부딪혔지만 HTML 변경을 요청해야 하고 전체적인 문제가 되는 대형 프로젝트에서 순수한 CSS 솔루션을 찾고 있었습니다.
을 position:relative; z-index:-1 컨텐츠 내 컨텐츠가 표시되었습니다(다른 와 ie8+에서).인서더운가내의미와 ie7든다디서다이고른기에츠내디다고n이미8ne와yy서든+yptry7n른edtt(ee인(다nst
는 을 하지 했다는 입니다 입니다 했다는 하지 는 z-index:-1그래서 나는 전체 페이지의 상위 요소로 가서 그것을 주었습니다.position:relative; z-index:1
이는 문제를 해결하고 올바른 계층화 기능을 유지했습니다.
약간 어색한 느낌이지만 필요에 따라 작동했습니다.
ie7 특정 스타일시트의 div에 특별한 z-index 지정을 해야 한다는 사실을 알게 되었습니다.
div { z-index:10; }
nav와 같은 관련 없는 div의 z 인덱스가 슬라이더 위에 표시되도록 합니다.슬라이더 디브 자체에 단순히 z-index를 추가할 수는 없었습니다.
이전에 언급한 상위 노드의 z 인덱스가 필요에 맞지 않을 경우 IE 조건부 설명이나 Modernizr에서 제공하는 (보다 이상적인) 기능 감지를 사용하여 대체 솔루션을 생성하고 문제가 있는 브라우저로 대상을 지정할 수 있습니다.
Modernizr에 대한 빠른(그리고 분명히 작동하는) 테스트:
Modernizr.addTest('compliantzindex', function(){
var test = document.createElement('div'),
fake = false,
root = document.body || (function () {
fake = true;
return document.documentElement.appendChild(document.createElement('body'));
}());
root.appendChild(test);
test.style.position = 'relative';
var ret = (test.style.zIndex !== 0);
root.removeChild(test);
if (fake) {
document.documentElement.removeChild(root);
}
return ret;
});
CSS 표준과 다른 이해를 위해 버그가 아닌 것 같습니다.외부 컨테이너가 지정되지 않은 경우 z-index가 지정되었지만 내부 요소가 더 높은 z-index를 지정한 경우.따라서 컨테이너의 형제는 높은 z 지수 요소를 오버레이할 수 있습니다.그렇더라도 IE7에서만 발생하지만 IE6, IE8, 파이어폭스는 괜찮습니다.
일반적으로 IE6에서, 특정 UI 요소는 네이티브 컨트롤로 구현됩니다.이러한 컨트롤은 완전히 별개의 단계(window?)로 렌더링되며 z-index에 관계없이 항상 다른 컨트롤 위에 나타납니다.셀렉트 박스는 또 다른 문제가 있는 컨트롤입니다.
이 문제를 해결할 수 있는 유일한 방법은 IE가 별도의 "창"으로 렌더링하는 컨텐츠를 구성하는 것입니다. 즉, 텍스트 상자 위에 선택 상자를 놓거나, 더 유용하게는 iframe을 배치할 수 있습니다.
간단히 말해서, IE가 위에 내장된 UI 컨트롤을 배치하기 위해서는 iframe에 메뉴와 같은 "on-hover"를 넣어야 합니다.
IE7에서 이 문제를 해결했어야 합니다(http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx) 참조). 호환성 모드로 실행 중인 것은 아닐까요?
이 버그는 표준 별도의 스택 컨텍스트 IE 버그와는 다소 별개의 문제인 것 같습니다.여러 개의 스택 입력(기본적으로 각 행에 자동 완성기가 있는 테이블)과 유사한 문제가 있었습니다.제가 찾은 유일한 해결책은 각각의 셀에 감소하는 z-index 값을 주는 것이었습니다.
드롭다운 메뉴를 만들고 z-index에 문제가 있는 경우 같은 값의 z-index(예: z-index:999)를 생성하여 해결할 수 있습니다.부모님과 자녀의 디브에 z 지수만 넣으면 문제가 해결됩니다.그것으로 문제를 해결합니다.다른 z 인덱스를 입력하면 부모 div에 대해 자녀 div가 표시되지만 메뉴 탭에서 하위 메뉴 div(드롭다운 목록)로 마우스를 이동하면 사라집니다...그런 다음 같은 가치의 z-벡터를 넣고 문제를 해결합니다.
IE7용 개발자 도구(도구 모음)를 사용하고, 다른 디브 아래에 있는 디브의 컨테이너에 음의 z-index를 추가하여 해결했습니다.
언급URL : https://stackoverflow.com/questions/1287439/ie7-z-index-layering-issues
'programing' 카테고리의 다른 글
| 애플 터치 아이콘의 정확한 픽셀 치수는 얼마입니까? (0) | 2023.09.08 |
|---|---|
| 마리아에서 트리거 만들기DB (0) | 2023.09.08 |
| Angular2 RC5: 'Property X'에 바인딩할 수 없습니다. 'Child Component'의 알려진 속성이 아니기 때문입니다. (0) | 2023.09.08 |
| SQL Server로 Excel 스프레드시트를 가져오려면 어떻게 해야 합니까? (0) | 2023.09.08 |
| Ajax 이벤트에 대한 브라우저 Navigation Timing API를 한 페이지 앱에서 사용할 수 있습니까?그렇지 않다면, 좋은 도구는 무엇입니까? (0) | 2023.09.08 |