Nuria: Elemente innerhalb der FlexBox überlappen obwohl die das nicht sollen...

Beitrag lesen

SELF-Forum

Elemente innerhalb der FlexBox überlappen obwohl die das nicht sollen...

Nuria
– Informationen zu den Bewertungsregeln

Hallo,

Ich habe ein Problem mit einem Flexbox- Konstrukt:

div.seite
{
display:-webkit-flex;-webkit-flex-direction:column;-webkit-align-items:flex-start; /* für Safari */
display:-ms-flexbox;-ms-flex-direction:column;-ms-flex-align-items:flex-start;   /* IE 10*/
display:flex;flex-direction:column;  /* alle anderen */
-webkit-align-content: flex-start; 
align-content: flex-start;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-wrap:wrap;
flex-wrap: wrap;
}

Die hier enthaltenen DIVS funktionieren alle wie gewünscht, sie sind so breit, daß jedes einen Sprung in die nächste Row zur Darstellung des Folgenden verursacht. Soweit ja schön. Über Order kann ich ggf den Navigationsbereich ohne Hovereffekte (also aufgeklappt) am Ende des Dokumentes platzieren. Auch schön =)

/* Reihenfolge der flexiblen Elemente*/

div.panorama { 
	order:2;
 	
}

div.localbranding {
	order:1;
}

div.content { 
order:4;

}

@media (min-device-width: 800px)
{
	div.nav { order:3;}
	div.nav-link { order:5; }	 
}
@media (max-device-width: 799px)
{ 
	div.nav { order:5;}
	div.nav-link { order:3; }	 
}

Für Tablets etc hätte ich die ausgeklappte Navigationsleiste gerne links neben dem Artikel. Das dürfte ja anhand der Flexdirection (siehe oben) der elterlichen FlexBox kein Problem sein, ist es aber. Den dafür letztendlich benötigten Media-Query ANY-HOVER habe ich noch nicht eingesetzt, daran kann es also nicht liegen....

Zum Problem: Die beiden Elemente in der Flexbox (auch DIVs) erscheinen übereinander, als hätte ich mit z-index gearbeitet...

Ich habe die beiden aufeinander erscheinenden DIVs in der Breite verkleinert natürlich, brachte jedoch keinen Effekt....

Bin gerade ziemlich mit meinem Latein am Ende, ein schlimmer Spaghetticode ist es eigentlich nicht.... Das eine Element ist der dargestellte Artikel und das andere die aufgeklappte, von oben nach unten laufende, Navigationsleiste (letztendlich eine Liste).

Danke vorab für Eure Ratschläge

Beitrag melden
–
Informationen zu den Bewertungsregeln