✔ Problem mit dem z-index

[Leoplay]

Guten Tag

Ich komme mal am besten gleich zur Sache. Ich sitze momentan insofern fest, dass ich nicht mehr weiter komme mit dem z-index! Ich habe vor, ein Menü aus rechteckigen Boxen zu entwerfen (7 an der Zahl) mit den Maßen 425x45 Pixel. Zwischen den Boxen ist ein Abstand von 30 Pixeln. Diese Boxen sind sind mit einem Hintergrundbild belegt, welches ein Ausschnitt, eines Bildes, mit den Maßen 425x525 Pixeln ist . Nun sollte, wenn man auf eine dieser Boxen geht (mouseover-funktion) , das "große" Bild sich über die 7 kleinen Boxen legen.

Mein Problem ist nun leider, dass ich dies mit dem z-index lösen wollte. Das Problem ist allerdings, dass der z-index eine absolute Positionierung erfordert. Wenn ich jedoch den Boxen und dem "großen" Bild eine absolute Positionierung gebe, wird leider nur die unterste Box abgedeckt :-/

Bezüglich der mouseover-funktion habe ich mir bis jetzt noch keine Gedanken gemacht Bitte dies berücksichtigen in dem noch sehr anfänglichen Quelltext!

CSS und HTML habe ich mal gekürzt zur Übersichtlichkeit!

Spoiler: CSS

.menu {
float: left;
width: auto;
position: relative;
}

.menubox {
margin-top: 30px;
width: 425px;
height: 45px;
border: 1px solid #C0C0C0;
}

/*mit displayimg sollte das Bild sich über das Menü legen*/
.displayimg {
position: absolute;
width: 425px;
height: 525px;
z-index: 1;
background-color: #ffffff;
border: 1px solid #C0C0C0;
}

Spoiler: HTML

<div class="menu">
<div class="menubox" style="margin-top:0px;"><img src="Images/menu/imgbs_01.jpg"</div><br>
<div class="menubox"><img src="Images/menu/imgbs_02.jpg" width="425" height="45"></div><br>
<div class="menubox"><img src="Images/menu/imgbs_03.jpg" width="425" height="45"></div><br>
<div class="menubox"><img src="Images/menu/imgbs_04.jpg" width="425" height="45"></div><br>
<div class="menubox"><img src="Images/menu/imgbs_05.jpg" width="425" height="45"></div><br>
<div class="menubox"><img src="Images/menu/imgbs_06.jpg" width="425" height="45"></div><br>
<div class="menubox"><img src="Images/menu/imgbs_07.jpg" width="425" height="45"></div><br>

<div class="displayimg"><img src="Images/menu/img_01.jpg"></div>
</div>

Liebe Grüße und noch einen schönen Freitag

 

[SpiceLab]

Ein Problem mit der Schichtposition kann ich hier nicht erkennen, vielmehr mit der Startposition

.displayimg {
position: absolute;
width: 425px;
height: 525px;
z-index: 1;
background-color: #ffffff;
border: 1px solid #C0C0C0;
top:0; /* Startposition von oben */
}

 

[Leoplay]

So schnell und so einfach kann es gehen ..

Es klappt jetzt tatsächlich fehlerfrei *grins*. Vielen Dank für deine schnelle Antwort!