|
|||
Problem mit Sticky Menü und relativem Layer
Hallo liebe Community,
ich habe bei mir auf der Seite einen Div-Layer mit einem Background Bild. Da ich in diesem Div-Layer einen Text am bottom über dem Bild haben möchte musste ich dem Div-Layer die Position "relative" geben. Nun habe ich das Problem, dass das Bild der Text die sich in dem Div-Layer befinden, beim Scrollen der Seite über dem Sticky-Menü angezeigt werden, also eine Eben darüber. Das Sticky-Menü muss aber über allen Inhalten stehen, die auf der Seit plaziert werden. Da machen nun die Div-Layer mit Position:relative Probleme. Hat jemand einen Rat wie ich da vorgehen kann? Das Sticky Menü: Code:
nav { background: #FFFFFF; height:56px; /* Sticky */ display: block; position: -webkit-sticky; position: sticky; top: 0; } Code:
<div class="ym-gbox image-with-price"> <div class="image" style="background-image: url('images/beispiel-immo-tn.jpg');"></div> <span>87.000,00 EUR</span> </div> Code:
gbox.image-with-price { padding: 0; position: relative; } with-price div.image { background-color: #dadada; background-position: center center; background-repeat: no-repeat; background-size: cover; display: block; height: 200px; width: 100%; } Geändert von all4pages (29.01.2017 um 19:27 Uhr) |
Sponsored Links |
|
|||
Soweit ich weiss, gibt es bei positition:sticky kein z-index.
Die Idee bringt mich aber auf was. Ich verschachtel die Navigation in einen Weiteren Div-layer und gebe dem position:absolut und geb dem dann einen z-index melde mich wieder im Laufe des Tages |
|
|||
In meiner Internetseite ist das Sticky Menü schon in einem höheren z-index.
Aber mir scheint es als wenn, sobald man einen Inhalt mit position:relativ versieht, dass er dann alles andere nicht mehr berücksichtigt. Ich habe mein Problem in das folgende Beispiel eingebaut, damit man es sich besser vorstellen kann. Wenn Ihr den Quelltext nehmt und in einer HTML speichert, dann seht Ihr den negativen Effekt, die Inhalte wie das Bild und der Text im Bild (bottom) gehen immer über das Sticky Menü beim Hochscrollen. Ich hab das Bild mit dem Auto zweimal untereinander, damit es hochgenug zum Scrollen ist, also nicht dadurch verwirren lassen. HTML-Code:
<!DOCTYPE html> <html> <meta charset="utf-8"/> <style> body {font-family: "Lato", sans-serif;} nav { background: #0080c0; height:56px; color:white; /* Sticky */ display: block; position: -webkit-sticky; position: sticky; top: 0; } .bild-with-text{ position: relative; margin-top:20px; margin-bottom: 50px; } .bild{ width: 900px; height: 1000px; background: transparent url("http://www.maennernews.info/uploads/bugattiveyrongrandsport.jpg") top left repeat-y; margin-left: 50px; } .text{ position: absolute; z-index: 5; bottom: 0; padding: 10px; display: block; background-color: #26aae7; margin-left: 50px; } </style> <body> <h1>Das ist ein Stickymenü</h1> <p>Leider gehen Inhalte, wie das Bild beim Scrollen über das Sticky-Menü, weil sie in einem Div-Layer liegen der position:relative hat. Ich brauche die position:relative aber weil ich Text in diesem Div-Layer richtig positionieren will (bottom).</p> <p>Warum schiebt sich ein relativer DIV über einen Sticky DIV und wie kann man das umgehen?</p> <nav>Testnavigation Button1 Button2 Button3</nav> <div class="bild-with-text"> <div class="bild"></div> <div class="text">Das ist der Text</div> </div> </body> </html> Geändert von all4pages (31.01.2017 um 16:49 Uhr) |
|
|||
Hi etux,
das funktioniert hervoragend, ich kapier nur nicht warum ich nun dem position:sticky auf einmal doch ein z-index mitgeben kann. Ich schwöre ich hatte das versucht gehabt und mich gewundert, denn es ging nicht und nun geht es aber. Da hab ich irgend etwas falsch gemacht gehabt. So und nen z-index negativ zu stellen ist mir auch neu, aber ja auch das würde funktionieren. Also da blieben ja jetzt keine Wünsche offen, denn ich hab nicht nur eine, nein sogar gleich zwei Lösungsmöglichkeiten von Dir bekommen. Muchas gracias |
|
||||
Zitat:
. |
|
||||
Zitat:
So auf die Schnelle ein Beispiel: HTML-Code:
<!DOCTYPE html> <meta charset="utf-8"> <title>all4pages :: xhtmlforum.de</title> <style> body { font-family: "Lato", sans-serif; } nav { background: #0080c0; height:56px; color:white; /* Sticky */ display: block; position: -webkit-sticky; position: sticky; top: 0; } .bild-with-text { margin-top:20px; margin-bottom: 50px; text-align: center; } .bild { display: inline-block; vertical-align: bottom; width: 900px; max-width: 100%; height: 1000px; margin-right: -900px; background: transparent url("http://www.maennernews.info/uploads/bugattiveyrongrandsport.jpg") top left repeat-y; background-size: contain; } @media screen and (max-width: 900px) { .bild { margin-right: -100%; } } .text { display: inline-block; vertical-align: bottom; text-align: left; width: 900px; max-width: 100%; padding: 10px; box-sizing: border-box; background-color: #26aae7; } </style> <h1>Das ist ein Stickymenü</h1> <p>Leider gehen Inhalte, wie das Bild beim Scrollen über das Sticky-Menü, weil sie in einem Div-Layer liegen der position:relative hat. Ich brauche die position:relative aber weil ich Text in diesem Div-Layer richtig positionieren will (bottom).</p> <p>Warum schiebt sich ein relativer DIV über einen Sticky DIV und wie kann man das umgehen?</p> <nav>Testnavigation Button1 Button2 Button3</nav> <div class="bild-with-text"> <div class="bild"></div><!-- --><div class="text">Das ist der Text</div> </div> |
Sponsored Links |
|
|||
Sehr nice, wirklich sehr gutes Beispiel.
Herrzlichen Dank für Deine Mühe, das ist wirklich grossartig von Dir. Wie weit ist das Browserunabhängig und Abwätskompatible, css 2.1? Ich versuche immer die Browser, die 5-6 Jahre alt sind noch mit einzubeziehen. Ich abrbeite mit dem YAML CSS&HTML Framework und versuche möglichst viel immer mit den Bordmitteln des Frameworks zu erstellen. Grüsse |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Style Problem mit DropDown Menü und IE - Funktionalität geht | dsbrot | CSS | 0 | 31.03.2010 12:13 |
horizontales tab menü - problem bei webkit basierten browsern | cpt.future | CSS | 1 | 21.08.2007 20:49 |
Problem mit padding im Menü | Sp33dy G0nz4l3s | CSS | 1 | 22.09.2006 20:09 |
problem mit layer um img | neo21 | CSS | 25 | 28.03.2005 01:27 |
Das Menü und mein Problem | Sven | CSS | 1 | 13.03.2005 03:07 |