Z-Index und Dropdown

[onpoint]

Hallo zusammen,

ich hätte eine kleine CSS-Frage:

Sagen wir ich habe eine Navigation, die sich beim Hovern des li-Elementes (Button) via css translate nach oben bewegt. Diese Navigation versteckt sich hinter einem Banner (z-index) und ragt ein stück heraus.

Nun soll diese Navigation ein Dropdown-Menü bekommen, welches jedoch über und nicht hinter dem Banner liegen soll. Mit einem höheren z-index-wert gibt es keine Erfolge, da dieses Dropdownmenü ein Tochterelement von dem ist, welches bereits hinter den Banner gesetzt wurde.

Alleine dem Dropdown-Menü einen hohen z-index-wert zu geben funktionierte also nicht. Ich hoffe ich habs verständlich erklärt.

Hat jemand eventuell Ideen?

Viele Grüße und danke im Voraus!

 

[Talirion]

AW: Z-Index und Dropdown

Hallo onpoint,
kannst du uns mal nen link geben wo wir uns das ansehen können, aktuell kann ich es mir so nicht ganz vorstellen und ich denke das du daher auch noch keine Antwort hast
LG

 

[onpoint]

AW: Z-Index und Dropdown

Hallo Talirion,

ich habe die Situation mal auf die Schnelle nachgebaut.

Ihr könnt sie euch unter folgendem Link anschauen:



Das gelbe ist der Banner, die Buttons liegen hinter ihm und ragen aus. Das rote, welches absteht, soll die Dropdown-Navi darstellen, die auf dem Banner platziert werden soll, doch irgendwie frisst der Browser das nicht. Ich habe auch wieder ewig nach Fehlern gesucht, ich finde leider nichts.

Vielleicht habt ihr ja mehr Erfolg?

Viele Grüße!

 

[Talirion]

AW: Z-Index und Dropdown

also ich bin mir jetzt echt grad nicht ganz sicher, aber würde mal sagen das dein

ul#navi_top {
  position: absolute;
  left: 415px;
  top: 130px;
  width: 548px;
  z-index: 999;
}

benötigt im erst mal ganz oben zu sein, deine Menus müssen dann eine höhe von 27px oder os haben:

ul#navi_top li {
  height: 27px;
  ...
}

od beim hover dann halt den passenden wert sowie beim z-index was höheres um alles andere zu überlagern...:

ul#navi_top li:hover {
  height: 34px;
  z-index: 99999;
  ....
}

dann sollte dein menu zumindest mal sichtbar sein, da ich kein css experte bin müsstest du mal gucken ob du ggf. irgendwie durch ein:

ul#navi_top li ul{
  display:null;
}
ul#navi_top li:hover ul{
  display:block;
}

etwas erreichen kannst....

ob es einen weg gibt nur mit css den block auch hinter dem banner nach oben zu ringen? ka

LG

Talirion

 

[onpoint]

AW: Z-Index und Dropdown

Hallo Talirion,

danke für Deinen Beitrag! Ich glaube du hast mich aber falsch verstanden. Es ist schon richtig so, dass die Navigation hinter dem Banner sein soll und nur ein Stück rausragt. Lediglich das Dropdown Menü soll über dem Banner erscheinen.

In folgendem Muster, welches ich schnell erstellt habe, funktioniert es auch:



Die Navi (gelb) ist hinter dem Banner und das Dropdown Menü (rot) ist über dem Banner. Ich verstehe nicht weshalb es in meinem Beispiel oben nicht funktioniert...

Grüße!

 

[Talirion]

AW: Z-Index und Dropdown

Hallo Talirion,

danke für Deinen Beitrag! Ich glaube du hast mich aber falsch verstanden. Es ist schon richtig so, dass die Navigation hinter dem Banner sein soll und nur ein Stück rausragt. Lediglich das Dropdown Menü soll über dem Banner erscheinen.

In folgendem Muster, welches ich schnell erstellt habe, funktioniert es auch:



Die Navi (gelb) ist hinter dem Banner und das Dropdown Menü (rot) ist über dem Banner. Ich verstehe nicht weshalb es in meinem Beispiel oben nicht funktioniert...

Grüße!

ich verstehe einfach nicht welchen sinn es macht die nav punkte so lang zu machen .... eine Lösung habe ich so leider nicht dafür ggf. Jquery

LG

 

[onpoint]

AW: Z-Index und Dropdown

ich verstehe einfach nicht welchen sinn es macht die nav punkte so lang zu machen .... eine Lösung habe ich so leider nicht dafür ggf. Jquery

LG

Wären sie auf der exakten Größe würde beim transform-effekt eine Lücke entstehen. Ich denke nicht, dass ich für dieses eigentlich simple Vorhaben jquery benötige. In dem einen Beispiel funktionierts ja auch mit Css. Ich finde nur nicht den ausschlaggebenen Punkt, weshalb es beim anderen nicht funktioniert und z-index ignoriert wird...

 

[patrick_l]

AW: Z-Index und Dropdown

Ich habe mir jetzt deine Beispiele angeschaut, steige da aber trotzdem nicht so ganz hinter. Wie soll sich die Navigation genau verhalten wenn man mit der Maus darüber fährt?

Wären sie auf der exakten Größe würde beim transform-effekt eine Lücke entstehen.

Welche Lücken meinst du?

Liebe Grüße, Patrick

 

[Talirion]

AW: Z-Index und Dropdown

Wären sie auf der exakten Größe würde beim transform-effekt eine Lücke entstehen. Ich denke nicht, dass ich für dieses eigentlich simple Vorhaben jquery benötige. In dem einen Beispiel funktionierts ja auch mit Css. Ich finde nur nicht den ausschlaggebenen Punkt, weshalb es beim anderen nicht funktioniert und z-index ignoriert wird...

mach mal die änderungen an deinem css die ich oben drin hatte dann entsteht keine lücke da ich beim hover die größe angepasst hab ^^

 

[onpoint]

AW: Z-Index und Dropdown

Hallo Jungs,

Patrick:

Habe es bis dahin mal fertiggebastelt. Hier seht ihr auch, wie sich die Buttons beim hovern verhalten. Das Dropdownmenü hat dann natürlich keinen wert transform mehr. Dort habe ich es nun mit der exakten Höhe versucht, die sich beim hovern einfach um 7px vergrößert. (Der Wert, um den das Element auch nach oben geschoben wird). Im Firefox funktioniert das (abgesehn, dass ab und zu das dropdown flackert, wieso?), im Chrome sieht man jedoch Lücken, sobald der Punkt mit dem Dropdown gehovert wird. Auch bei den anderen Navigationen gibt es optische Ungereimtheiten.



Talirion:

Du hast Recht, hab den Punkt gestern nicht berücksichtigt. Funktioniert so im Grunde auch, jedoch nicht zuverlässig, wie oben beschrieben. mir fällt dabei echt kein logischer Grund dazu ein..

Ich habe davon Wind bekommen, dass css3 transition Probleme im Zusammenspiel mit z-index machen soll. Ob es wohl damit was zu tun hat? Es funktioniert nämlich nur (wenn wir wieder von Buttons mit großer Höhe ausgehen und sie überlappen), wenn ich den Wert von ul#navi_top li:hover auf z-index:999 setze. Somit verliert der Button während der Transition-Effekt ausgeführt seine z-index-Zuweisung. Seltsame Sache..

Außerdem fällt mir beim IE9 was verrücktes auf. Ich starte den IE9 und gehe auf die Seite. Dort wird alles richtig dargestellt und das Untermenü funktioniert auch. Allerdings poppt der IE mir unten ein Fenster auf, in dem er mir sagt, dass bestimmte Skripts und AktiveX Steuerelemente für diese Seite eingeschränkt wurden und ob ich die geblockten Inhalte zulassen möchte. Wenn ich das bestätige und die geblockten Inhalte zulasse funktioniert die komplette Unternavigation nicht mehr.

-edit- das tritt nur lokal auf und war wohl die firewall, wenn ichs mir mit dem IE im Web anschaue funktioniert ebenso nichts.