Problem mit z-Index

hth · 3. Februar 2014

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 · 3. Februar 2014

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

lauras · 3. Februar 2014

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 · 3. Februar 2014

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 · 3. Februar 2014

hth schrieb:

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();">
</body>
</html>

Alles anzeigen