How to solve this IE6 z-index bug?
Question
I have read this iFrame workaround for IE6. But I really don't understand on how to use this if I display a DIV dynamically.
I have attached a sample. When clicking on the input element, I want to show a div panel that have the topmost z-index. (That should be displayed over the select control)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript">
function showItem(obj) {
obj.style.visibility = 'visible';
obj.focus();
}
</script>
</head>
<body>
<input onclick="showItem(myPanel)" />
<div id="myPanel" style="position: absolute; top: 35px; left: 10px; width: 200px;
height: 200px; background-color: Gray; visibility: hidden; color: Silver;">
Hello world
</div>
<div>
<select name="thisDD" id="thisDD">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</body>
</html>
1 answers
solution1
0 ACCPTED 2009-10-09 13:02:20
To use the iframe workaround, you need to declare an iframe at the same coordinates, same width, same height, with a low z-index.
<iframe id="iframe" style="position: absolute; top: 35px; left: 10px; width: 200px; height: 200px; visibility: hidden; z-index: 1" frameborder="0"></iframe>
Then you need to declare a higher z-index on the div:
<div id="myPanel" style="...; z-index: 2"></div>
Then when you showItem, show both the iframe and the div. The iframe will nestle behind the div because its z-index is lower.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.