Grafik legt sich über Overlay

[neelix]

Hallo zusammen,

ich habe für einen prominenten Hinweis mit euf_overlay ein Overlay erzeugt. Das funktioniert prinzipiell auch, aber auf kleineren Displays (iPhone SE 2 oder meinem Xperia XZ2 Compact) schiebt sich das Logo aus dem Hintergrund vor das Overlay. Ich finde aber im CSS nichts, was das verursacht.
Die Seite wurde nicht von mir erstellt, ich habe nur die Pflege übernommen.

Hat jemand eine Idee, warum das so passiert?

URL: https://www.ra-buergel.de/

Wire 2022-01-11 at 19-54-25.png

Danke & Gruß

Klaus

[derRenner]

z-index in #logo

#logo {
    position: absolute;
    right: 25px;
    top: 35px;
    z-index: 10;
}

[neelix]

Ah, danke. Da habe ich den Wald vor lauter Bäumen nicht gesehen.
Mal schauen, ob ich den Z-Index gefahrlos rausnehmen kann. Sonst muss das Overlay weiter nach vorne.

[Zille]

z-index in #logo

#logo {
    position: absolute;
    right: 25px;
    top: 35px;
    z-index: 10;
}

Nicht nur das Logo legt(e) sich (bei mir) über das Overlay, sondern jeglicher anderer Inhalt auch. Insofern habe ich es mit

.euf_overlay {
    z-index: 100;
}

gelöst.

[neelix]

Nicht nur das Logo legt(e) sich (bei mir) über das Overlay, sondern jeglicher anderer Inhalt auch. Insofern habe ich es mit

.euf_overlay {
    z-index: 100;
}

gelöst.

Was denn noch? Oder meinst Du auf einer anderen Seite?

[Zille]

Was denn noch? Oder meinst Du auf einer anderen Seite?

siehe oben: … legt(e) sich (bei mir) über das Overlay …

[neelix]

siehe oben: … legt(e) sich (bei mir) über das Overlay …

Ich war mir nicht sicher, ob du mit bei mir, deine Seite oder einen Test auf o.g. Seite meintest.

[Zille]

Zum besseren Verständnis: Ich hatte das Overlay mit einer Verzögerung von wenigen Sekunden eingebunden (was bei dir offensichtlich nicht der Fall ist). Wurde in dieser Zeit nach unten gescrollt, dann wurde das Overlay weiterhin überlagert. Allerdings nunmehr nicht vom Logo, sondern von anderen Elementen. Eben solchen, die auf der Seite weiter unten angeordnet sind – je nachdem, wie weit gescrollt wurde.
Heißt, wenn das Overlay nicht sofort beim Laden der Seite angezeigt wird, sollte ein (höherer) z-Index mitgegeben werden, um eine Überlagerung zu vermeiden.