Praktische Positionierungsbeispiele

Das erste Beispiel, das wir uns ansehen, ist eine klassische Registerkarten-Infobox — ein sehr übliches Feature, das verwendet wird, wenn Sie viele Informationen auf kleinem Raum packen möchten. Dazu gehören informationsreiche Apps wie Strategie-/Kriegsspiele, mobile Versionen von Websites, bei denen der Bildschirm schmal und der Platz begrenzt ist, und kompakte Informationskästen, bei denen Sie viele Informationen verfügbar machen möchten, ohne dass sie die gesamte Benutzeroberfläche füllen. Unser einfaches Beispiel wird am Ende so aussehen:

Vielleicht denken Sie: "Warum nicht einfach die separaten Registerkarten als separate Webseiten erstellen und die Registerkarten einfach darauf verlinken, um den Effekt zu erzielen?" Der Code wäre zwar einfacher, aber jede separate "Seitenansicht" würde tatsächlich eine neu geladene Webseite darstellen, was es schwieriger machen würde, Informationen über Ansichten hinweg zu speichern und diese Funktion in ein größeres UI-Design zu integrieren.

Zu Beginn möchten wir, dass Sie eine lokale Kopie der Anfangsdateien erstellen — tabbed-info-box-start.html und tabs-manual.js. Speichern Sie diese an einem sinnvollen Ort auf Ihrem lokalen Computer und öffnen Sie tabbed-info-box-start.html in Ihrem Texteditor. Werfen wir einen Blick auf das HTML im Body:

<section class="info-box">
  <div role="tablist" class="manual">
    <button
      id="tab-1"
      type="button"
      role="tab"
      aria-selected="true"
      aria-controls="tabpanel-1">
      <span>Tab 1</span>
    </button>

    <button
      id="tab-2"
      type="button"
      role="tab"
      aria-selected="false"
      aria-controls="tabpanel-2">
      <span>Tab 2</span>
    </button>
    <button
      id="tab-3"
      type="button"
      role="tab"
      aria-selected="false"
      aria-controls="tabpanel-3">
      <span>Tab 3</span>
    </button>
  </div>

  <div class="panels">
    <article id="tabpanel-1" role="tabpanel" aria-labelledby="tab-1">
      <h2>The first tab</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
        turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum
        et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius
        libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt
        metus. Donec ultrices, urna maximus consequat aliquet, dui neque
        eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor
        urna. Nulla facilisi.
      </p>
    </article>

    <article id="tabpanel-2" role="tabpanel" aria-labelledby="tab-2">
      <h2>The second tab</h2>
      <p>
        This tab hasn't got any Lorem Ipsum in it. But the content isn't very
        exciting all the same.
      </p>
    </article>

    <article id="tabpanel-3" role="tabpanel" aria-labelledby="tab-3">
      <h2>The third tab</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
        turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an
        ordered list: how exciting!
      </p>
      <ol>
        <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
        <li>Aliquam ut porttitor urna.</li>
        <li>Nulla facilisi</li>
      </ol>
    </article>
  </div>
</section>

Hier haben wir ein <section>-Element mit einer class von info-box, das zwei <div>s enthält. Das erste div enthält drei Buttons, die die tatsächlichen Registerkarten zum Anklicken für das Anzeigen unserer Inhaltspanels werden. Das zweite div enthält drei <article>-Elemente, die die Inhaltspanels bilden, die jeder Registerkarte entsprechen. Jedes Panel enthält einige Beispielinhalte.

Die Idee hierbei ist, die Registerkarten so zu stylen, dass sie wie ein Standard-Navigationsmenü aussehen, und die Panels mithilfe der absoluten Positionierung übereinander zu legen. Zudem stellen wir Ihnen ein wenig JavaScript zur Verfügung, das Sie auf Ihrer Seite einfügen können, um das entsprechende Panel anzuzeigen, wenn eine Registerkarte gedrückt wird, und die Registerkarte selbst zu stylen. Sie müssen den JavaScript-Code an dieser Stelle nicht verstehen, aber Sie sollten erwägen, bald etwas über grundlegendes JavaScript zu lernen — je komplexer Ihre UI-Funktionen werden, desto wahrscheinlicher ist es, dass Sie etwas JavaScript benötigen, um die gewünschte Funktionalität zu implementieren.

Fügen Sie zunächst das folgende CSS zwischen Ihren öffnenden und schließenden <style>-Tags hinzu:

html {
  font-family: sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

Dies ist nur eine allgemeine Einrichtung, um eine serifenlose Schrift auf unserer Seite zu setzen, das border-box box-sizing-Modell zu verwenden und den Standard-<body>-Rand zu entfernen.

Fügen Sie als Nächstes das folgende CSS direkt unter Ihrem vorherigen CSS hinzu:

.info-box {
  width: 452px;
  height: 400px;
  margin: 1.25rem auto 0;
}

Dies legt eine bestimmte Breite und Höhe für den Inhalt fest und zentriert ihn auf dem Bildschirm mit dem alten margin: 1.25rem auto 0. Zuvor im Kurs haben wir davon abgeraten, wenn möglich eine feste Höhe für Inhaltscontainer festzulegen; in diesem Fall ist es jedoch in Ordnung, da wir feste Inhalte in unseren Registerkarten haben.

Nun möchten wir die Registerkarten so stylen, dass sie wie Registerkarten aussehen — im Grunde handelt es sich um ein horizontales Navigationsmenü, aber anstatt verschiedene Webseiten zu laden, wenn sie angeklickt werden, wie zuvor im Kurs gesehen, bewirken sie, dass auf derselben Seite verschiedene Panels angezeigt werden. Fügen Sie zuerst die folgende Regel am Ende Ihres CSS hinzu, um die tablist zu einem flex-Container zu machen und 100% Breite einzunehmen:

.info-box [role="tablist"] {
  min-width: 100%;
  display: flex;
}

Als Nächstes stylen wir die Buttons so, dass sie wie Registerkarten aussehen. Fügen Sie das folgende CSS hinzu:

.info-box [role="tab"] {
  padding: 0 1rem 0 1rem;
  line-height: 3rem;
  background: white;
  color: #b60000;
  font-weight: bold;
  border: none;
  outline: none;
}

Dann setzen wir die :focus- und :hover-Zustände der Registerkarten so, dass sie anders aussehen, wenn sie fokussiert bzw. darübergefahren werden, und den Benutzern ein visuelles Feedback geben.

.info-box [role="tab"]:focus span,
.info-box [role="tab"]:hover span {
  outline: 1px solid blue;
  outline-offset: 6px;
  border-radius: 4px;
}

Anschließend setzen wir eine Regel, die eine der Registerkarten hervorhebt, wenn die aria-selected-Eigenschaft auf true gesetzt ist. Wir werden dies mit JavaScript festlegen, wenn auf eine Registerkarte geklickt wird. Platzieren Sie das folgende CSS unter Ihren anderen Stilen:

.info-box [role="tab"][aria-selected="true"] {
  background-color: #b60000;
  color: white;
}

Die nächste Aufgabe ist es, unsere Panels zu stylen. Los geht's!

Fügen Sie zuerst die folgende Regel hinzu, um den .panels-<div>-Container zu stylen. Hier setzen wir eine feste height, um sicherzustellen, dass die Panels genau in die Infobox passen, position relative, um das <div> als Positionierungskontext festzulegen, sodass Sie dann positionierte Kindelemente relativ dazu und nicht zum anfänglichen Ansichtsfenster platzieren können, und schließlich clear wir das im CSS oben gesetzte Float, damit es den restlichen Layout nicht beeinträchtigt.

.info-box .panels {
  height: 352px;
  clear: both;
  position: relative;
}

Schließlich für diesen Abschnitt werden wir die einzelnen <article>-Elemente stylen, die unsere Panels ausmachen. Die erste Regel, die wir hinzufügen werden, positioniert die Panels absolut position, und lässt sie alle bündig an der top und left ihrer <div>-Container sitzen — dieser Teil ist entscheidend für dieses gesamte Layout-Feature, da es die Panels übereinander positioniert. Die Regel gibt den Panels auch die gleiche festgelegte Höhe wie der Container und fügt den Inhalten etwas Padding, eine Text-color und eine background-color hinzu.

.info-box [role="tabpanel"] {
  background-color: #b60000;
  color: white;
  position: absolute;
  padding: 0.8rem 1.2rem;
  height: 352px;
  top: 0;
  left: 0;
}

Die zweite Regel, die wir hier hinzufügen, bewirkt, dass ein Panel mit der Klasse is-hidden auf ihm versteckt wird. Erneut werden wir diese Klasse zu geeigneten Zeitpunkten mit JavaScript hinzufügen/entfernen. Wenn eine Registerkarte ausgewählt ist, wird die entsprechende Tafel ihre is-hidden-Klasse entfernt haben und alle anderen Tafeln werden is-hidden-Klassen gesetzt haben, sodass nur eine Tafel gleichzeitig sichtbar ist.

.info-box [role="tabpanel"].is-hidden {
  display: none;
}

Der letzte Teil, der dieses Feature zum Funktionieren bringt, ist der JavaScript-Code. Die Datei tabs-manual.js wurde mit dem <script>-Tag eingebunden:

<script src="tabs-manual.js"></script>

Dieser Code tut Folgendes:

• Beim Window-Load-Event initialisiert es TabsManual Klasse für alle tablist-Elemente.

• Wenn ein TabsManual-Objekt erstellt wird, werden im Konstruktor alle Referenzen zu Registerkarten und Panels in den Variablen tabs und tabpanels gesammelt, sodass wir später einfach darauf zugreifen können.

• Der Konstruktor registriert auch click- und keydown-Ereignishandler bei allen Registerkarten. Die Ereignishandler enthalten Logik darüber, was passieren soll, wenn eine Registerkarte durch Klick oder Tastendruck ausgewählt wird.

• In der Funktion setSelectedTab(currentTab) passiert Folgendes:

  • Eine for-Schleife wird verwendet, um alle Registerkarten zu durchlaufen und sie durch Setzen der aria-selected-Eigenschaft auf false zu deaktivieren und durch Setzen der is-hidden-Klasse auf den entsprechenden Panels zu verstecken.
  • Auf der ausgewählten Registerkarte (currentTab) wird aria-selected auf true gesetzt und die is-hidden-Klasse vom entsprechenden Panel entfernt.

• Der Code unterstützt auch die Tastaturnavigation mit den Tasten Linkspfeil, Rechtspfeil, Home und Ende.

In unserem zweiten Beispiel nehmen wir unser erstes Beispiel — unsere Info-Box — und fügen sie in den Kontext einer vollständigen Webseite ein. Aber nicht nur das — wir geben ihr eine feste Position, sodass sie an derselben Position im Browserfenster bleibt. Wenn der Hauptinhalt scrollt, bleibt die Info-Box an derselben Position auf dem Bildschirm. Unser fertiges Beispiel sieht so aus:

Als Ausgangspunkt können Sie Ihr fertiggestelltes Beispiel aus dem ersten Abschnitt des Artikels verwenden, oder Sie erstellen eine lokale Kopie von tabbed-info-box.html aus unserem GitHub-Repo.

Zuerst benötigen wir zusätzliches HTML, um den Hauptinhalt der Webseite darzustellen. Fügen Sie das folgende <section>-Element direkt unterhalb Ihres öffnenden <body>-Tags ein, direkt vor dem bestehenden Abschnitt:

<section class="fake-content">
  <h1>Fake content</h1>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
  <p>
    This is fake content. Your main web page contents would probably go here.
  </p>
</section>

Als Nächstes müssen wir einige kleine Änderungen am bestehenden CSS vornehmen, um die Infobox zu platzieren und zu positionieren. Ändern Sie Ihre .info-box-Regel, um margin: 0 auto; zu entfernen (wir möchten die Infobox nicht mehr zentrieren), fügen Sie position: fixed; hinzu und kleben Sie sie an die top des Browser-Anzeigebereichs.

Es sollte nun so aussehen:

.info-box {
  width: 452px;
  height: 400px;
  margin: 0 auto;
  position: fixed;
  top: 0;
}

Das Einzige, was für dieses Beispiel noch übrig bleibt, ist, dem Hauptinhalt etwas Stil zu verleihen. Fügen Sie die folgende Regel unterhalb des Restes Ihres CSS hinzu:

.fake-content {
  background-color: #a60000;
  color: white;
  padding: 10px;
  height: 2000px;
  margin-left: 470px;
}

.fake-content p {
  margin-bottom: 200px;
}

Zunächst geben wir dem Inhalt die gleiche background-color, color, und padding wie den Infobox-Panels. Dann geben wir ihm einen großen margin-left, damit er nach rechts verschoben wird und Platz für die Infobox macht, sodass diese nichts überlappt.

Damit endet das zweite Beispiel; wir hoffen, dass Sie das dritte genauso interessant finden.

Das letzte Beispiel, das wir hier präsentieren, ist ein Panel, das beim Drücken eines Symbols auf den Bildschirm gleitet oder von diesem verschwindet — wie bereits erwähnt, ist dies beliebt für Situationen wie mobile Layouts, bei denen der verfügbare Bildschirmplatz klein ist, sodass Sie nicht den größten Teil davon nutzen möchten, indem Sie anstelle des nützlichen Inhalts ein Menü oder Infobereich zeigen.

Unser fertiges Beispiel sieht so aus:

Als Ausgangspunkt machen Sie eine lokale Kopie von hidden-info-panel-start.html aus unserem GitHub-Repo. Dies baut nicht auf dem vorherigen Beispiel auf, sodass eine neue Startdatei erforderlich ist. Lassen Sie uns einen Blick auf das HTML in der Datei werfen:

<button
  type="button"
  id="menu-button"
  aria-haspopup="true"
  aria-controls="info-panel"
  aria-expanded="false">
      ❔
</button>

<aside id="info-panel" aria-labelledby="menu-button">
  …
</aside>

Hier haben wir zunächst ein <button>-Element mit einem speziellen Fragezeichenzeichen als Button-Text. Der Button wird gedrückt, um das aside-Infopanel zu zeigen/verbergen. In den folgenden Abschnitten werden wir erklären, wie das alles funktioniert.

Zuerst beschäftien wir uns mit dem Button — fügen Sie das folgende CSS zwischen Ihre <style>-Tags ein:

#menu-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;

  font-size: 3rem;
  cursor: pointer;
  border: none;
  background-color: transparent;
}

Die erste Regel stylt den <button>; hier haben wir:

• Eine große font-size eingestellt, um das Symbol schön groß zu machen.
• Den Rahmen entfernt und den Hintergrund transparent gemacht, sodass anstelle des Buttons nur das ?-Symbol angezeigt wird.
• position absolute darauf gesetzt und top und right verwendet, um es ordentlich in der oberen rechten Ecke zu positionieren.
• Ein z-index von 1 darauf gesetzt — dies ist so, dass wenn das Infopanel gestylt und angezeigt wird, es das Symbol nicht verdeckt; stattdessen wird das Symbol darüber sitzen, sodass es erneut gedrückt werden kann, um das Infopanel zu verstecken.
• Die cursor-Eigenschaft verwendet, um den Mauszeiger zu ändern, während er über das Symbol schwebt, zu einer Hand (wie die, die Sie sehen, wenn Sie über Links fahren), als zusätzlich visuellen Hinweis für Benutzer, dass das Symbol etwas Interessantes tut.

Nun ist es an der Zeit, das eigentliche gleitende Panel zu stylen. Fügen Sie die folgende Regel am Ende Ihres CSS hinzu:

#info-panel {
  background-color: #a60000;
  color: white;

  width: 340px;
  height: 100%;
  padding: 0 20px;

  position: fixed;
  top: 0;
  right: -370px;

  transition: 0.6s right ease-out;
}

Hier passiert viel — lassen Sie uns das Stück für Stück besprechen:

• Zuerst setzen wir eine einfache background-color und color auf die Infobox.
• Als Nächstes setzen wir eine feste width auf das Panel und machen seine height die gesamte Höhe des Browser-Anzeigebereichs.
• Wir fügen auch etwas horizontales padding hinzu, um es etwas auszufüllen.
• Als Nächstes setzen wir position: fixed; auf das Panel, sodass es immer an derselben Stelle erscheint, auch wenn die Seite zu scrollen ist. Wir fixieren es oben im Ansichtsfenster und setzen es standardmäßig so, dass es außerhalb des Bildschirms rechts ist.
• Schließlich setzen wir eine transition auf das Element. Transition ist ein interessantes Feature, das ermöglicht, dass Änderungen zwischen Zuständen reibungslos erfolgen, anstatt abrupt "an" oder "aus" zu gehen. In diesem Fall beabsichtigen wir, dass das Panel reibungslos in den Bildschirm gleitet, wenn das Kontrollkästchen aktiviert ist. (Oder anders ausgedrückt, wenn das Fragezeichen-Symbol geklickt wird.)

Es gibt ein letztes Stück CSS, das hinzugefügt werden muss — setzen Sie das folgende am Ende Ihres CSS:

#info-panel.open {
  right: 0px;
}

Die Regel besagt, dass wenn das Infopanel die .open-Klasse gesetzt hat, die right-Eigenschaft des <aside> auf 0px gesetzt wird, was dazu führt, dass das Panel wieder auf dem Bildschirm erscheint (dank der Transition sanft). Das Entfernen der .open-Klasse verbirgt das Panel erneut.

Um die .open-Klasse in das Infopanel mit einem Klick auf den Button hinzuzufügen/zu entfernen, brauchen wir etwas JavaScript. Fügen Sie den folgenden Code zwischen <script>-Tags ein:

const button = document.querySelector("#menu-button");
const panel = document.querySelector("#info-panel");

button.addEventListener("click", () => {
  panel.classList.toggle("open");
  button.setAttribute("aria-expanded", panel.classList.contains("open"));
});

Der Code fügt dem Button einen Klickereignishandler hinzu. Der Klickhandler schaltet die open-Klasse auf dem Infobox-Panel, das das Panel ein- oder ausblendet. Der Ereignishandler setzt auch die aria-expanded-Eigenschaft auf dem Button zur Verbesserung der Zugänglichkeit.

Das war's auch schon — die einfachste Möglichkeit, einen umschaltbaren Infopanel-Effekt zu erstellen.

Damit endet unser Blick auf die Positionierung — mittlerweile sollten Sie eine Vorstellung davon haben, wie die grundlegenden Mechanismen funktionieren, sowie verstehen, wie man beginnt, diese anzuwenden, um einige interessante UI-Funktionen zu erstellen. Machen Sie sich keine Sorgen, wenn Sie nicht alles sofort verstanden haben — Positionierung ist ein ziemlich fortgeschrittenes Thema, und Sie können die Artikel jederzeit erneut durcharbeiten, um Ihr Verständnis zu fördern.