IE7 Z 인덱스 계층화 문제
IE7의 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- 색인은 절대 측정이 아닙니다. 각 요소가 서로 다른 스태킹 컨텍스트에 속하는 한 z-index : 1000 요소가 z-index : 1 요소 뒤에있을 수 있습니다 .
When you specify z-index, you're specifying it relative to other elements in the same stacking context, and although the CSS spec's paragraph on Z-index says a new stacking context is only created for positioned content with a z-index other than auto (meaning your entire document should be a single stacking context), you did construct a positioned span: unfortunately IE7 interprets positioned content without z-index this as a new stacking context.
In short, try adding this CSS:
#envelope-1 {position:relative; z-index:1;}
or redesign the document such that your spans don't have position:relative any longer:
<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>
See http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ for a similar example of this bug. The reason giving a parent element (envelope-1 in your example) a higher z-index works is because then all children of envelope-1 (including the menu) will overlap all siblings of envelope-1 (specifically, envelope-2).
Although z-index lets you explicitly define how things overlap, even without z-index the layering order is well defined. Finally, IE6 has an additional bug that causes selectboxes and iframes to float on top of everything else.
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;
});
});
In IE positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly.
Try give the parent element a higher z-index value (can be even higher than the child’s z-index value itself) to fix the bug.
I encountered this issue, but on a large project where HTML changes had to be requested and became a whole issue, so I was looking for a pure css solution.
By placing position:relative; z-index:-1 on my main body content my header drop down content suddenly displayed above the body content in ie7 (it was already displaying without issue in all other browsers and in ie8+)
The problem with that was then this disabled all hover and click actions on all content in the element with the z-index:-1 so i went to the parent element of the whole page and gave it a position:relative; z-index:1
Which fixed the issue and retained the correct layering functionality.
Feels a bit hacky, but worked as required.
I found that I had to place a special z-index designation on div in a ie7 specific styelsheet:
div { z-index:10; }
For the z-index of unrelated divs, such as a nav, to show above the slider. I could not simply add a z-index to the slider div itself.
If the previously mentioned higher z-indexing in parent nodes wont suit your needs, you can create alternative solution and target it to problematic browsers either by IE conditional comments or using the (more idealistic) feature detection provided by Modernizr.
Quick (and obviously working) test for 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;
});
It looks like not a ie bug, just for diffrent understanding to the css standard. If outside container is not specified the z-index, but the inner element specified a higher z-index. So the container's sibling maybe overlay the high z-index element. Even if like that, it only occurs in IE7, but IE6, IE8 and Firefox is ok.
In IE6 in general, certain UI-elements are implemented with native controls. These controls are rendered in a completely separate phase (window?) and always appear above any other controls, regardless of z-index. Select-boxes are another such problematic control.
The only way to work-around this issue is to construct content which IE renders as a seperate "window" - i.e. you can place a selectbox over a textbox, or, more usefully, an iframe.
In short, you'll need to put "on-hover" like things such as menu's in an iframe in order to let IE place these above built-in UI controls.
This should have been fixed in IE7 (see http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx) but perhaps you're running in some kind of compatibility mode?
This bug seems to be somewhat of a separate issue than the standard separate stacking context IE bug. I had a similar issue with multiple stacked inputs (essentially a table with an autocompleter in each row). The only solution I found was to give each cell a decreasing z-index value.
If you wanna create dropdown menu and having a problem with z-index, you can solve it by creating z-indexes of same value (z-index:999; for example).. Just put z-index in parent and child div's and that will solve problem. I solve the problem with that. If i put different z-indexes, sure, it will show my child div over my parent div, but, once i want to move my mouse from menu tab to the sub-menu div (dropdown list), it dissapear... then i put z-indexes of same value and solve the problem..
I solved it by using the developer tools for IE7 (its a toolbar) and adding a negative z-index to the container of the div that will be below that the other div.
참고URL : https://stackoverflow.com/questions/1287439/ie7-z-index-layering-issues
'IT박스' 카테고리의 다른 글
| Ubuntu에서 32 비트에서 64 비트 프로그램을 크로스 컴파일 할 때 "bits / c ++ config.h"가 누락되었습니다. (0) | 2020.05.31 |
|---|---|
| Visual Studio 2010에서 콘솔의 출력을보고 있습니까? (0) | 2020.05.31 |
| PHP에서 ===가 ==보다 빠른 이유는 무엇입니까? (0) | 2020.05.31 |
| VIM에서 수직 분할로 버퍼 열기 (0) | 2020.05.31 |
| MongoDB : 필드가 존재하지 않는 문서를 찾으십니까? (0) | 2020.05.31 |