CSS Code Tipps – Floating Box erstellen – Elemente fixieren

Floating Logo - Elemente fixieren
Floating Logo

Auf dieser Seite möchte ich Ihnen erklären wie Sie einen div Container fixieren. So das er immer an der selben Stelle angezeigt wird. Auch beim hoch- oder runter-scrollen bleibt er fixiert. So wie rechts die Grafik →

Elemente fixieren – Grafiken, div Container und so weiter

Im Prinzip können Sie jedes Element fixieren. Ob eine Grafik oder einen kurzen Text. Zum Beispiel „Lese-Tipp!“. Auch Videos können Sie auf diese Weise fixieren. Der CSS Code den Sie dafür benötigen ist auch recht simple und schnell erklärt.

.floating-box {
 position: fixed;
 width: 150px;
 height: 150px;
 top: 150px;
 right: 10px;
}
  • .floating-box { → Wir legen den Namen für den Style fest (floating-box). Den Namen können Sie frei wählen. Mit der spitzen Klammer öffnen  wir den Style.
  • position: fixed; → Hier legen wir fest das die Box (Grafik, Text oder Video) fixiert wird. Also immer an der selben Stelle bleibt.
  • width: 150px; → Hier legen wir die Breite der Box fest.
  • height: 150px; → Hier legen wir die Höhe der Box fest.
  • top: 150px; → Abstand nach oben.
  • right: 10px; → Abstand nach rechts.
  • } → Zum Schluss wird jeder Style mit einer spitzen Klammer wieder geschlossen

Wie Sie sehen ist es sehr einfach ein Element zu fixieren. Höhe und breite der Box können Sie nach Ihren Wünschen anpassen. Der Abstand nach oben und nach rechts kann auch individuell angepasst werden. Wenn Sie Box zum Beispiel 10 Pixel von linken Rand ausrichten möchten dann einfach das right: 10px; mit left 10px; austauschen.

Floating Box in WordPress einbinden.

Den CSS Code können Sie in die style.css Ihres Child Themes einbinden. Oder per Custom CSS Plugin. Den folgenden HTML Code können Sie entweder direkt in Ihr Theme einbetten zum Beispiel in einem speziellen Page Template. Oder einfach beim erstellen einer neuen Seite oder eines neuen Beitrags mit einfügen.

<div class="floating-box">Floating Box</div>

Floating Box erstellen – Elemente fixieren – Zusammenfassung

Ein klarer Vorteil an dieser Variante ist Sie brauchen kein extra Plugin installieren. Ein wenig CSS Code genügt. Mit dem Plugin Sticky Menu (or Anything!) on Scroll können Sie Beispielsweise ein Element fixieren welche über eine ID verfügt. Zur WordPress.org Plugin-Seite →

Welche Methoden nutzen Sie um Elemente zu fixieren? Plugin oder auch einfachen CSS Code?

Kommentarregeln → Kein Spam! Keine Links im Kommentar! Keine Urls als Name benutzen! Vorname oder Nickname reichen aus und sind Pflicht damit Ihr Kommentar freigeschaltet wird. Eine Email Adresse müssen Sie nicht eintragen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.