00 Stimmen

CSS: DIV-Box, die immer am oberen Browser-Rand bleibt

Frage von Gast | Letztes Update am 17.02.2018 | Erstellt am 29.06.2014

Ich würde gerne auf meiner Website einen DIV-Container realisieren, der immer im Browser am oberen Rand fixiert bleibt.

Es soll also egal sein, ob man auf der Seite nach oben oder nach unten scrollt, die Box soll immer relativ zum Browser an der Oberseite bleiben und nicht mit der Seite mitscrollen. Also so, dass man die Box immer als Navigation sehen kann, auch wenn man ganz nach unten gescrollt hat.

Nach Möglichkeit sollte diese Box auch über die gesamte Seite von links nach rechts laufen und nicht nur nicht nur einen Teil bedecken.

Ich hoffe, ich konnte mich ausdrücken. Ist so etwas mit reinem CSS ohne JavaScript möglich?

AntwortenPositivNegativ
Avatar
-2Beste Antwort2 Stimmen

Das ist mit reinem CSS ohne weiteres möglich.

Probiere einmal folgendes CSS:

#immeroben{
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  position: fixed;
  z-index: 999;
}

Mit folgendem HTML:

<div id="immeroben">INHALT</div>

Mit position:fixed erreichst du, dass dein Element fest steht und nicht mitgescrollt wird.

Mit left:0 und top:0 positionierst du das Element oben links in der Ecke und mit width:100% und height:50px gibst du ihm eine Breite über die gesamte Seitenbreite mit einer Höhe von 50 Pixeln.

Zuletzt solltest du einen hohen z-index Wert wählen, der höher ist als bei allen anderen Elementen auf deiner Seite, die nicht über dem DIV zu sehen sein sollen. Sonst kann es passieren, dass der andere Inhalt deiner Seite über dem DIV zu sehen ist und das DIV nicht über allem liegt.
30.06.2014 um 14:55

AntwortenPositiv Negativ
Antworten

Ähnliche Themen

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.