Erledigt - Dropdwon versteckt sich hinter Content

[ackermaennchen]

Guten Morgen liebe Gemeinde... ich komme direkt mal mit einem Problem. ich bin gerade dabei meine Website neu zu gestalten. Nun hab ich das Problem, das sich das Dropdown vom Menü hinter dem Content versteckt. unter gibt es das ganze zum begutachten. Was ich nicht verstehe, auf der Startseite funktioniert es. Bei Über mich (der einzige Link der momentan funktioniert) bekomme ich es nicht hin. Die Seite baut auf Bootstrap auf.

 

[dn3d_fanboy]

<div class="row nav_container">
<div class="col-lg-8 col-md-8 col-sm-9" role="navigation" style="z-index: 999">

Hiermit klappt es im Firebug.

Ich würde das <div> nach <div class="row nav_container"> noch durch <nav> ersetzen.

Dann im CSS mit.

.nav_container nav {
z-index: 999;
}

arbeiten.

 

[ackermaennchen]

Super Danke für die schnelle Antwort. hat so funktioniert. Div wurde auch gegen nav ausgetauscht


kannst du mir dennoch erklären warum es auf der Unterseite einen z-Index braucht aber auf der Startseite wo ja auch ein normales div folgt nicht? Nur damit ich weiß warum und nachvollziehen kann für die Zukunft.

 

[dn3d_fanboy]

Das habe ich mich auch gefragt. Das Bild auf der Unterseite scheint keinen z-index zu haben.

 

[ackermaennchen]

Eben, aber es war egal was für ein Element platziert wurde, ein einfaches div ohne weitere Klasse mit dem inhalt "Test" genügte schon um die Navigation außer Kraft zu setzen.

 

[pixelmaker]

annst du mir dennoch erklären warum es auf der Unterseite einen z-Index braucht aber auf der Startseite wo ja auch ein normales div folgt nicht?

Das habe ich mich auch gefragt. Das Bild auf der Unterseite scheint keinen z-index zu haben.

Ganz einfach: Ohne die z-index-Eigenschaft werden alle Elemente, deren Anzeigebereiche sich überlappen, in der Reihenfolge übereinandergelegt, in der sie im HTML-Quelltext definiert sind.

grüße
ralf

 

[dn3d_fanboy]

Ganz einfach: Ohne die z-index-Eigenschaft werden alle Elemente, deren Anzeigebereiche sich überlappen, in der Reihenfolge übereinandergelegt, in der sie im HTML-Quelltext definiert sind.

grüße
ralf

Schon klar. Aber dann hätte schon auf der Startseite das Dropdown hinter den Content rutschen müssen, was nicht der Fall war (und im CSS habe ich auch nichts dergleichen finden können).

 

[pixelmaker]

Schon klar. Aber dann hätte schon auf der Startseite das Dropdown hinter den Content rutschen müssen, was nicht der Fall war

Leider zu spät. Ich kann das jetzt nicht mehr sehen. Ich würde mir aber auch nicht so groß Gedanken dazu machen, es ist immer bessser den Zufall auszuschliessen und das Stylesheet von Vornherein sauber aufzubauen und jedem Element einen Z-Index vergeben. Wenn man da Ideen mit Lösungen braucht ist csszengarden immer ein guter Quell. Jedes Design hat immer den gleichen Inhalt, nur das Stylesheet ist geändert. Die jeweiligen Stylesheets sind immer im Download.
Dann hast Du auch keine Lust mehr auf die Riesenschriften und die schwarzen Platten hinter den Submenüs…

grüße
ralf

 

[Myhar]

Ich würde mir aber auch nicht so groß Gedanken dazu machen, es ist immer bessser den Zufall auszuschliessen und das Stylesheet von Vornherein sauber aufzubauen und jedem Element einen Z-Index vergeben.

Bei einem sauber aufgebauten Stylesheet hat nicht jedes Element einen z-index sondern wirklich nur die Elemente, die einen benötigen. Deshalb ist es besser, sich von Vornherein Gedanken zu machen und sein HTML und CSS sauber aufzubauen.

 

[ackermaennchen]

Es mag sein das mein CSS nicht ganz aufgeräumt ist. Aber eig ja es schon ganz ordentlich. Früher sag es schlimmer aus

Bei den Schriften und dem Rest ist es dann wieder Geschmackssache. Klar ist das vielleicht nicht die modernste Lösung. Aber ich verdiene auch kein Geld mit Webdesign. Und ich persönlich mag es simple und klar. Und wenn das alles steht und funktioniert kann man ja noch etwas finetuning betreiben und die Schriften und Hintergründe anpassen.

 

[dkarvounaris]

Hier sind die Sachen die man zum z-index und Überlappen der Elemente wissen sollte:

Elemente überlappen sich immer in der Reihenfolge wie sie im DOM erscheinen.
Allerdings werden Elemente, die nicht-static (standardmässig haben alle Elemente: position: static) sind immer Elemente die static sind überlappen.
Ebenso, werden ohne z-index floats vor nicht-floats platziert, aber immer hinter anderen positionierten Elementen.

Elemente können sich aus den verschiedensten Gründen überlappen, ob es nun absolute Positionierung ist, oder ein negatives Margin, relative Positionierung hat die Priorität dessen geändert (relative immer über static) und noch so vieles mehr.

Deswegen muss/sollte in Zusammenhang mit z-index auch die CSS-Eigenschaft position und einen anderen Wert als static benutzt werden, um die Anwendung von z-index auch entsprechend zu ermöglichen.

Auch die Ebene bzw. Tiefe der Elemente spielt eine entscheidende Rolle.

So kann ein Kindselement das innerhalb eines Elternelements im DOM liegt welches von einem anderen Element überlappt wird, nicht über dieses andere Element platziert werden, auch wenn der z-index des Kindselements höher ist als der z-index des anderen Elements. Das heisst, der z-index wirkt nur auf die Elemente eines bestimmten Stacks bzw. einer Ebene. Im Beispiel hier müsste also das Elternelement mit den anderen Element um ein z-index konkurrieren für die Platzierung, nicht das Kindselement.

Übrigens, kann man auch negative z-index Werte nutzen!