✔ Layer übereinander via CSS?

[wirsing]

Hallo!

Ich suche eine Lösung für folgendes Problem:

Ich habe auf der Seite einen grossen Layer, nennen wir ihn Layout-Layer. Diesen benutze ich, um die eigentlichen Layer zu nesten und relativ zueinander zu positionieren (sprich zentrieren, links/rechts floaten etc).
Jetzt muss ich aber zwei dieser genesteten Layer übereinander legen, um eine Art erweitertest Roll-Over-Menu zu erstellen und dachte dies dann über den visibilty-tag entsprechend umzusetzen.

Nun ist es aber so, daß ich die Layer nur übereinander bekomme, wenn ich kein CSS zu Hilfe nehme und absolut positioniere.
Unabhängig davon, welche Positionierungswerte und -methoden ich versuche, via CSS wird der folgende Layer immer unter dem vorhergehenden dargestellt, wenn die Position identisch sein soll.

Über einen konkreten Ansatz oder ein Workaround würde ich mich sehr freuen!

Dank vorab und viele Grüße
Alex

 

[Lord-Lance]

Hast dus schon mal mit dem Z-Index versucht?

 

[wirsing]

Jap, passiert aber leider überhaupt nix.

 

[Lord-Lance]

Hast mal ein bisschen Code oder einen Link? Das würd evtl. ungemein helfen!

 

[wirsing]

Okay, ich hab mal die zwei Beispielseiten ins Netz gestellt:

http://www.eyescore.de/menutest/lala0.htm

Die Erklärungen hab ich ins Fesnter geschrieben...

Viele Grüße
Alex

 

[Quaese]

Hi,

zuerst der Code:

<div style="text-align: center; margin-top: 100px;">
    <div style="position: relative; width: 564px; height: 92px; border: 0px solid white; text-align: left;">
        <div id="menu2" style="position: absolute; top: 0px; left: 0px;  width: 564px; z-index: 1; visibility: hidden;" onmouseout="MM_showHideLayers('menu2','','hide','menu1','','show')">
            <a href="#"><img style="float: left; margin: 0px;" src="http://www.eyescore.de/menutest/graphics/toolbar/toolbar_d_01.jpg" alt="home" name="home_d" width="106" height="92" border="0" id="home_d" onmouseover="MM_swapImage('home_d','','http://www.eyescore.de/menutest/graphics/toolbar/toolbar_w_01.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>
            <a href="#"><img style="float: left; margin: 0px;" src="http://www.eyescore.de/menutest/graphics/toolbar/toolbar_d_02.jpg" alt="gallery" name="gallery_d" width="118" height="92" border="0" id="gallery_d" onmouseover="MM_swapImage('gallery_d','','http://www.eyescore.de/menutest/graphics/toolbar/toolbar_w_02.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>
            <a href="#"><img style="float: left; margin: 0px;" src="http://www.eyescore.de/menutest/graphics/toolbar/toolbar_d_03.jpg" alt="search" name="search_d" width="107" height="92" border="0" id="search_d" onmouseover="MM_swapImage('search_d','','http://www.eyescore.de/menutest/graphics/toolbar/toolbar_w_03.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>
            <a href="#"><img style="float: left; margin: 0px;" src="http://www.eyescore.de/menutest/graphics/toolbar/toolbar_d_04.jpg" alt="contact" name="contact_d" width="118" height="92" border="0" id="contact_d" onmouseover="MM_swapImage('contact_d','','http://www.eyescore.de/menutest/graphics/toolbar/toolbar_w_04.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>
            <a href="#"><img style="float: left; margin: 0px;" src="http://www.eyescore.de/menutest/graphics/toolbar/toolbar_d_05.jpg" alt="about us" name="about_d" width="115" height="92" border="0" id="about_d" onmouseover="MM_swapImage('about_d','','http://www.eyescore.de/menutest/graphics/toolbar/toolbar_w_05.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>
        </div>
        <div id="menu1" style="position:absolute; top:0px; left: 0px; width: 564px; height:92px; z-index: 2; visibility: visible;" onmouseover="MM_showHideLayers('menu2','','show','menu1','','hide');" class="layerposi">
            <img src="http://www.eyescore.de/menutest/graphics/toolbar/toolbar.jpg" alt="toolbar" name="toolbar" width="564" height="52" id="toolbar" />
        </div>
    </div>
</div>

Der erste äusserste DIV-Container dient lediglich der Positionierung Deines Menüs.

Der zweite Container nimmt die "Überblend-Menüs" auf. Er bekommt die Positionierungs-
eigenschaft "relative" zugewiesen. Damit können Elemente, die in ihm enthalten
sind, relativ zu ihm ausgerichtet werden.

Jetzt folgt das erste Menü. Es wird absolut positioniert, d.h. durch top: 0px und left: 0px
wird es in die obere linke Ecke des zweiten Divs gesetzt. Ebenso wird mit dem
zweiten Menü verfahren, es bleibt jedoch zu Beginn verborgen.

Damit sind die Elemente positioniert und das Menü sollte funktionieren.

Ciao
Quaese