CSS-Divs überlappen, wie erzwinge ich eins über dem anderen?

Lesezeit: 2 Minuten

Benutzer-Avatar
Orun

Ich bin neu bei CSS und versuche, meine Website zu erstellen. Ich stoße auf ein Problem. Ich habe ein div mit einer festen Position erstellt, es erscheint jedoch unter anderen Elementen auf der Website. Wie zwinge ich es nach oben?

div#floater {
    position: fixed; 
    top: 420px; 
    left: -110px;   
}

div#floater:hover {
    left: 0;

Die Seite ist unter goinnativerecords.com zu finden (bewegen Sie den Mauszeiger über die Bilder an der Seite). Ich weiß, dass meine Codierung nicht die sauberste ist (Tipps sind willkommen).

Vielen Dank!

Benutzer-Avatar
Keiner

Verwenden Sie einfach den Z-Index:

z-index : 1;

Beachten Sie, dass der Z-Index nur für Elemente funktioniert, für die eine Art Positionierung festgelegt wurde (relativ, absolut, fest).

Nuancen:

Elemente mit einem höheren Z-Index werden vor Elementen mit einem niedrigeren Z-Index angezeigt im selben Stapelkontext. Wenn zwei Elemente den gleichen Z-Index haben, erscheint letzteres oben. Der Stapelkontext wird definiert durch:

  • Der Dokumentenstamm
  • Elemente mit position: absolute oder position: relative und ein z-Index
  • Elemente, die teilweise transparent sind, also eine Deckkraft < 1 haben
  • In IE7 kann jedes Element mit position: absolute oder position: relative (Dies kann viele Fehler verursachen, da es der einzige Browser ist, der sich so verhält.)

Wenn IE7 ein Problem darstellt, können Sie dafür sorgen, dass sich alle Browser gleich verhalten, indem Sie immer hinzufügen z-index : 1 zu jedem Element, das auch etwas hat position einstellen.

  • position: relative ist identisch mit position: static solange du das nicht einstellst top, left usw. Eigenschaften. Dies ist nützlich, wenn Sie den Z-Index für ein Element mit festlegen möchten position: static (normal) ohne den Rest des Layouts durcheinander zu bringen.

    – Markus Peschel

    25. September 2021 um 14:40 Uhr


Benutzer-Avatar
Pranay Rana

Gebrauch machen von CSS z-index-Eigenschaft wird Ihr Problem lösen

.myclass
{
  z-index:1;
}

für dein problem schau mal: Schicht auf Schicht mit Z-Index (Layer)

Dies sollte es tun, mit Absolute Position werden Ihre Elemente immer gemäß dem von Ihnen angegebenen Wert für Oben, Links positioniert

div#floater {    position: absolute;     top: 420px;     left: -110px;   }
div#floater:hover {    left: 0;}

1205700cookie-checkCSS-Divs überlappen, wie erzwinge ich eins über dem anderen?

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

Privacy policy