CSS immer im Vordergrund [closed]

Lesezeit: 2 Minuten

Ich habe eine Website mit einem festen Bild oben auf meinem Bildschirm. Wenn ich auf meiner Seite nach unten scrolle, bleibt das Bild oben, wie es sollte. Alle Inhalte unten überlappen jedoch mein Bild und werden dann verdeckt.

Wie kann ich dafür sorgen, dass meine obere Leiste (Bild) immer oben bleibt? Ich möchte, dass es den Inhalt der Seite abdeckt, während Sie scrollen.

  • benutze die z-index Stil.

    – Joeytje50

    27. Januar 2014 um 16:36 Uhr

Dafür sorgen position ist auf Ihrem Element und setzen Sie die z-index auf einen Wert, der höher ist als die Elemente, die Sie abdecken möchten.

element {
    position: fixed;
    z-index: 999;
}

div {
    position: relative;
    z-index: 99;
}

Es wird wahrscheinlich etwas mehr Arbeit erfordern, aber es ist ein Anfang, da Sie keinen Code gepostet haben.

  • Danke, aber was ist, wenn ich den Z-Index anderer Elemente nicht kenne? Nehmen wir also an, ich baue eine separate Komponente und in meiner Komponente habe ich ein Kontextmenü als div implementiert, und ich möchte sicherstellen, dass jeder meine Komponente verwendet, unabhängig davon, welche Z-Indizes für das div in seinem HTML für seine festgelegt sind Zeug, ich möchte sicherstellen, dass meine Komponente das Kontextmenü anzeigen sollte?

    – BEI IHRER

    9. November 2018 um 17:32 Uhr

  • Sie müssen 9999 verwenden, wenn Sie jquery dlg verwenden und höher gehen möchten.

    – Bhikkhu Subhuti

    18. Juli 2020 um 12:59 Uhr

Angenommen, Ihr Markup sieht so aus:

<div id="header" style="position: fixed;"></div>
<div id="content" style="position: relative;"></div>

Jetzt sind beide Elemente positioniert; In diesem Fall wird das unterste Element (in der Quellreihenfolge) das darüber liegende Element (in der Quellreihenfolge) überdecken.

Füge hinzu ein z-index auf Kopfzeile; 1 sollte ausreichen.

1251390cookie-checkCSS immer im Vordergrund [closed]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy