Antworten auf deine Fragen:
Neues Thema erstellen

Erledigt - Dropdwon versteckt sich hinter Content

ackermaennchen

Normalo

Teammitglied
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

Aktives Mitglied

HTML:
<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.

Code:
.nav_container nav {
z-index: 999;
}

arbeiten.
 

ackermaennchen

Normalo

Teammitglied
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.
 

ackermaennchen

Normalo

Teammitglied
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

jeden Tag neu hier

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

Aktives Mitglied

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

jeden Tag neu hier

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

Hat es drauf

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

Normalo

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

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

Lead Web Developer

PSD Beta Team
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!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben