zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Sticky Menü und relativem Layer

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.01.2017, 19:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.04.2009
Beiträge: 25
all4pages befindet sich auf einem aufstrebenden Ast
Standard 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;
    }
Der Div-Lauer der position:relativ gesetzt ist und seine 2 Inhalte
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>
das CSS dazu:
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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.01.2017, 10:08
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

z-index funktioniert nicht?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.01.2017, 15:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.04.2009
Beiträge: 25
all4pages befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 31.01.2017, 16:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.04.2009
Beiträge: 25
all4pages befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #5 (permalink)  
Alt 31.01.2017, 20:58
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von all4pages Beitrag anzeigen
Ich brauche die position:relative aber weil ich Text in diesem Div-Layer richtig positionieren will (bottom).
Das geht auch ohne „position“. Auch wenn für die Lösung(en) ein wenig Fantasie gebraucht wird.

Zitat:
Zitat von all4pages Beitrag anzeigen
... die Inhalte wie das Bild und der Text im Bild (bottom) gehen immer über das Sticky Menü beim Hochscrollen.
Entweder:
.bild-with-text { z-index: -1; }

oder:
nav { z-index: 1; }

Aber „z-index“ scheint bei Dir nicht zu funktionieren.

Zitat:
Zitat von all4pages Beitrag anzeigen
Warum schiebt sich ein relativer DIV über einen Sticky DIV und wie kann man das umgehen?
Alles ist geregelt und beschrieben. Man muss sich nur die Zeit nehmen, die Regel zu lernen.

.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #6 (permalink)  
Alt 31.01.2017, 22:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.04.2009
Beiträge: 25
all4pages befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 31.01.2017, 22:20
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von all4pages Beitrag anzeigen
... denn ich hab nicht nur eine, nein sogar gleich zwei Lösungsmöglichkeiten von Dir bekommen
Und einige Weitere, die ich nur angedeutet habe, die auch eine Positionierung (relative und absolute) im Inhaltsbereich überflüssig machen

.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #8 (permalink)  
Alt 01.02.2017, 17:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.04.2009
Beiträge: 25
all4pages befindet sich auf einem aufstrebenden Ast
Standard

Ja aber ich will nicht mit negativen margins arbeiten, wenn Du das gemeint hast.
Mit Zitat antworten
  #9 (permalink)  
Alt 01.02.2017, 17:43
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von all4pages Beitrag anzeigen
Ja aber ich will nicht mit negativen margins arbeiten, wenn Du das gemeint hast.
Und warum nicht?!?
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>
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 01.02.2017, 23:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.04.2009
Beiträge: 25
all4pages befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:18 Uhr.