Z-index mysterier
Jeg har nogle problemer med z-index (hvis det ER det der er problemet) på en side jeg arbejder med. Her har jeg forenklet siden så strukturen er den samme:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div#lag1 {
position:absolute; z-index:1; top:100px; left:150px; width:300px; height:100px;
background-color:#ff0000; border:1px; visibility:hidden;
}
div#lag2 {
position:absolute; z-index:1; top:250px; left:-50px; width:300px; height:100px;
background-color:#00ff00; border:1px; visibility:hidden;
}
div#lag3 {
position:absolute; z-index:1; top:380px; left:-130px; width:300px; height:100px;
background-color:#0000ff; border:1px; visibility:hidden;
}
iframe {
position:absolute: top:100px; left:0px; width:100%; height:400px;
</style>
<script type="text/javascript">
// Lidt frit efter "pelkjaer" på www.eksperten.dk. - Tak -
function findContent(theObj, theDoc) {
var p, i, foundObj;
if(!theDoc) theDoc = document;
if(!foundObj && document.getElementById && self!=parent) foundObj = parent.document.getElementById(theObj);
if(!foundObj && document.getElementById && self==parent) foundObj = document.getElementById(theObj);
return foundObj;
}
function showHideContent() {
var i, visStr, obj, args = showHideContent.arguments;
for (i=0; i<(args.length-1); i+=2) {
if ((obj = findContent(args[i])) != null) {
visStr = args[i+1];
if (obj.style) {
obj = obj.style;
if(visStr == 'show') visStr = 'visible';
else if(visStr == 'hide') visStr = 'hidden';
}
obj.visibility = visStr;
}
}
}
</script>
</head>
<body style="margin:0px">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="middle" style="width:100%; height:550px">
<table border="1" cellpadding="0" cellspacing="0" width="800" height="500">
<tr>
<td align="left" valign="top" style="width:200px">
<div style="position:relative; top:0px; left:0px">
<p><a href="java script:showHideContent('lag1','show');">Vis lag 1</a></p>
<p><a href="java script:showHideContent('lag1','hide');">Skjul lag 1</a></p>
<div id="lag1"></div>
</div></td>
<td align="left" valign="top" style="width:400px">
<div style="position:relative; top:0px; left:0px">
<p><a href="java script:showHideContent('lag2','show');">Vis lag 2</a></p>
<p><a href="java script:showHideContent('lag2','hide');">Skjul lag 2</a></p>
<div id="lag2"></div>
<iframe src="tom.html" scrolling="yes"></iframe>
</div></td>
<td align="left" valign="top" style="width:200px">
<div style="position:relative; top:0px; left:0px">
<p><a href="java script:showHideContent('lag3','show');">Vis lag 3</a></p>
<p><a href="java script:showHideContent('lag3','hide');">Skjul lag 3</a></p>
<div id="lag3"></div>
</div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Siden kan ses på: www.dahr.dk/Z-index
Problemet er: Alle de tre lag (div 1-3) har samme bredde. Men som I kan se, forsvinder laget i venstre celle halvt under iframen i den midterste celle, hvorimod laget fra den højre celle ikke forsvinder under iframen. Heller ikke laget i samme celle som iframen. Det er da mystisk! Jeg ved godt at dette kun er relevant for IE, da NS opfatter iframen som "windowed" og altså under ingen omstændigheder kan vise nogle af lagene over iframen, men jeg kører med en løsning for hver af de to browsere, og i IE vil jeg godt have alle lagene over iframen. Kan nogen se en løsning? Prøv at eksperimetere med det. Tak.
