Problem mit z-Index

hth

Image1 soll eigentlich nur eine Position nach oben verschoben werden, liegt aber ganz oben (IE11).

HTML

<script type="text/javascript"> 




function init(){ 
image1.style.position="fixed";image1.style.zIndex="3"; // Image1 ist leider ganz oben!
image2.style.position="fixed";image2.style.zIndex="2"; 
image3.style.position="fixed";image3.style.zIndex="4"; 
image4.style.position="fixed";image4.style.zIndex="5"; 
} 




function close() { 
window.open('', '_parent', ''); 
window.close(); 
} 
</script> 




<html> 
<body style="overflow:hidden; "onload="init();"> 
<div id='d1' style="position:fixed; top:0; left:0; z-index:1"> 
<img id="image1" src="bild1.png" width="600" height="450"></img> 
<div id='d2' style="position:fixed; top:100; left:100; z-index:2"> 
<img id="image2" src="bild2.png" width="600" height="450"></img> 
<div id='d4' style="position:fixed; top:200; left:200; z-index:4"> 
<img id="image3" src="bild3.png" width="600" height="450"></img> 
<div id='d5' style="position:fixed; top:300; left:300; z-index:5"> 
<img id="image4" src="bild4.png" width="600" height="450"></img> 
</body> 
</html>

Alles anzeigen

hth

Roland

weiß nicht obs daran liegt, aber du solltest deine divs schließen

lauras

1. Deine HTML-Struktur ist nicht korrekt. Der Doctype fehlt, der head-Bereich fehlt auch, in diesem sollte sich eigentlich auch der script-Tag befinden.
2. du schließt img-Tags, das ist nicht korrekt da img alleinstehende Elemente ohne schließenden Tag sind. Stattdessen solltest du wie Roland schon gesagt hat die div-Elemente schließen.
3. Du definierst die Variablen image1, image2 usw. gar nicht. Da fehlt irgendwo ein getElementById, sonst wird das nichts.

Ändere das mal, wenns dann immer noch nicht funktioniert schauen wir nochmal.

hth

Danke für die Hinweise. Das Hauptproblem waren die "divs". Image1 und Image2 müssen in einem gemeinsamen "div" stehen.
Das ansprechen über id="image1", ... funktioniert auch ohne extra Deklaration.

HTML

<script type="text/javascript">
function init(){ 
image1.style.position="fixed";image1.style.zIndex="3"; // jetzt ist es OK 
image2.style.position="fixed";image2.style.zIndex="2"; 
image3.style.position="fixed";image3.style.zIndex="4"; 
image4.style.position="fixed";image4.style.zIndex="5"; 
} 




function close() { 
window.open('', '_parent', ''); 
window.close(); 
} 
</script> 




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>><title>z-Index</title>
<body style="overflow:hidden; "onload="init();"> 
<div id='d1' style="position:fixed; top:0; left:0; z-index:1"> 
<img id="image1" src="bild1.png" width="600" height="450">
<div id='d2' style="position:fixed; top:100; left:100; z-index:2"> 
<img id="image2" src="bild2.png" width="600" height="450">
</div>
</div> 
<div id='d4' style="position:fixed; top:200; left:200; z-index:4"> 
<img id="image3" src="bild3.png" width="600" height="450">
</div>
<div id='d5' style="position:fixed; top:300; left:300; z-index:5"> 
<img id="image4" src="bild4.png" width="600" height="450">
</div> 
</body> 
</html>

Alles anzeigen

wolf

Zitat von hth

HTML

<script type="text/javascript">
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>><title>z-Index</title>
<body style="overflow:hidden; "onload="init();">

Was Hältst du von:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
        <title>z-Index</title>
        <script type="text/javascript">
            //hier dein Script
        </script>
   </head>
   <body style="overflow:hidden; "onload="init();"> 
     <!-- Hier dein eigentlicher Inhalt -->
   </body>
</html>

Alles anzeigen

Jetzt mitmachen!