Praktische Beispiele für Positionierung

Das erste Beispiel, das wir betrachten, ist eine klassische Infobox mit Registerkarten — eine sehr häufige Funktion, wenn Sie viele Informationen in einem kleinen Bereich unterbringen möchten. Dazu gehören informationslastige Apps wie Strategie-/Kriege-Spiele, mobile Versionen von Webseiten, auf denen der Bildschirm schmal ist und der Platz begrenzt ist, sowie kompakte Infoboxen, bei denen Sie viele Informationen zugänglich machen möchten, ohne dass sie die gesamte Benutzeroberfläche ausfüllen. Unser einfaches Beispiel wird so aussehen, wenn wir fertig sind:

Sie könnten denken: "Warum nicht einfach die separaten Registerkarten als separate Webseiten erstellen und einfach die Registerkarten klicken lassen, um die separaten Seiten anzuzeigen und den Effekt zu erzeugen?" Ja, dieser Code wäre einfacher, aber dann wäre jede separate "Seitenansicht" tatsächlich eine neu geladene Webseite, was es schwieriger machen würde, Informationen über Ansichten hinweg zu speichern und diese Funktion in ein größeres UI-Design zu integrieren.

Zunächst möchten wir, dass Sie eine lokale Kopie der Startdateien erstellen — tabbed-info-box-start.html und tabs-manual.js. Speichern Sie diese Dateien an einem sinnvollen Ort auf Ihrem Computer und öffnen Sie tabbed-info-box-start.html in Ihrem Texteditor. Schauen wir uns das HTML an, das sich im Body befindet:

<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>-Elemente enthält. Das erste Div enthält drei Buttons, die die tatsächlichen Registerkarten sein werden, auf die Sie klicken können, um unsere Inhalts-Panels anzuzeigen. Das zweite Div enthält drei <article>-Elemente, die die Inhalts-Panels bilden, die zu jeder Registerkarte gehören. Jedes Panel enthält einige Beispielinhalte.

Die Idee hier ist, dass wir die Registerkarten so gestalten, dass sie wie ein Standard-Horizontal-Navigationsmenü aussehen und die Panels mit absoluter Positionierung übereinander anordnen. Wir geben Ihnen auch ein bisschen JavaScript, das Sie auf Ihrer Seite einfügen können, um das entsprechende Panel anzuzeigen, wenn eine Registerkarte gedrückt wird, und den Registerkarte selbst zu gestalten. Sie müssen den JavaScript-Code an dieser Stelle nicht verstehen, aber Sie sollten darüber nachdenken, so bald wie möglich einige grundlegende JavaScript-Kenntnisse zu erlernen — je komplexer Ihre UI-Funktionen werden, desto wahrscheinlicher ist es, dass Sie ein wenig JavaScript benötigen, um Ihre gewünschte Funktionalität umzusetzen.

Fügen Sie zu Beginn Folgendes zwischen Ihren öffnenden und schließenden <style>-Tags ein:

html {
  font-family: sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

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

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

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

Dies legt eine spezifische Breite und Höhe für den Inhalt fest und zentriert ihn auf dem Bildschirm unter Verwendung des alten margin: 1.25rem auto 0. In vorherigen Kursen haben wir davon abgeraten, wenn möglich, eine feste Höhe auf Inhaltscontainer zu setzen. In diesem Fall ist es jedoch in Ordnung, da wir festen Inhalt in unseren Registerkarten haben.

Jetzt möchten wir die Registerkarten so gestalten, dass sie wie Registerkarten aussehen — im Grunde sind es horizontale Navigationsmenüs, aber anstatt verschiedene Webseiten zu laden, wenn sie angeklickt werden, so wie bisher in diesem Kurs gesehen, lassen sie verschiedene Panels auf derselben Seite anzeigen. Fügen Sie zuerst die folgende Regel am Ende Ihres CSS hinzu, um das tablist-Element zu einem flex-Container zu machen und es 100% Breite beanspruchen zu lassen:

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

Als Nächstes gestalten 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;
}

Als Nächstes setzen wir die :focus- und :hover-Zustände der Registerkarten, um sie anders aussehen zu lassen, wenn sie fokussiert/gehovered werden, und geben Benutzern visuelles Feedback.

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

Dann setzen wir eine Regel, die eine der Registerkarten hervorhebt, wenn die aria-selected Eigenschaft auf true gesetzt ist. Wir werden das mithilfe von JavaScript festlegen, wenn eine Registerkarte angeklickt wird. Platzieren Sie das folgende CSS unterhalb Ihrer anderen Stile:

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

Der nächste Job ist es, unsere Panels zu gestalten. Los geht's!

Fügen Sie zuerst die folgende Regel hinzu, um den .panels-<div>-Container zu gestalten. Hier setzen wir eine feste height, um sicherzustellen, dass sich die Panels bequem innerhalb der Infobox befinden, position relative, um das <div> als Positionierungskontext festzulegen, damit Sie positionierte Kindelemente relativ zu ihm und nicht zum ursprünglichen Viewport platzieren können, und schließlich clearen wir das Float, das im oben stehenden CSS gesetzt wurde, damit es den Rest des Layouts nicht beeinträchtigt.

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

Zum Schluss für diesen Abschnitt werden wir die einzelnen <article>-Elemente gestalten, die unsere Panels bilden. Die erste Regel, die wir hinzufügen, wird die Panels absolut positionieren und sie alle bündig an die top- und left-Seite ihres <div>-Containers setzen — dieser Teil ist der Schlüssel zu diesem gesamten Layout-Feature, da er die Panels übereinander positioniert. Die Regel gibt den Panels auch die gleiche festgesetzte Höhe wie der Container und gibt dem Inhalt etwas padding, eine Text-color und eine background-color.

.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, sorgt dafür, dass ein Panel mit einer Klasse is-hidden darauf versteckt wird. Auch hier werden wir diese Klasse zu gegebener Zeit mit JavaScript hinzufügen/entfernen. Wenn eine Registerkarte ausgewählt wird, wird das entsprechende Panel seine is-hidden Klasse entfernt bekommen und alle anderen Panels werden is-hidden gesetzt, sodass nur ein Panel gleichzeitig sichtbar ist.

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

Der letzte Teil, der diese Funktion zum Laufen bringt, ist der JavaScript-Code. Die Datei tabs-manual.js wurde mit dem <script>-Tag eingefügt:

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

Dieser Code erledigt Folgendes:

• Beim Window Load Event wird die TabsManual Class für alle tablist-Elemente initialisiert.

• Wenn ein TabsManual-Objekt erstellt wird, werden im Konstruktor alle Registerkarten- und Panel-Referenzen in den Variablen tabs und tabpanels gesammelt, sodass wir später leicht Dinge mit ihnen machen können.

• Der Konstruktor registriert auch click und keydown-Event-Handler auf allen Registerkarten. Die Event-Handler beinhalten Logik darüber, was passieren soll, wenn eine Registerkarte mit einem Klick oder Tastendruck ausgewählt wird.

• In der Funktion setSelectedTab(currentTab) geschieht Folgendes:

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

• Der Code hat auch Logik, um die Navigation mit der Tastatur mit den Tasten Linker Pfeil, Rechter Pfeil, Home und Ende zu unterstützen.

In unserem zweiten Beispiel nehmen wir unser erstes Beispiel — unsere Infobox — und fügen es in den Kontext einer vollständigen Webseite ein. Aber nicht nur das — wir geben ihm eine feste Position, damit es an derselben Stelle im Browserfenster bleibt. Wenn der Hauptinhalt scrollt, bleibt die Infobox an derselben Position auf dem Bildschirm. Unser fertiges Beispiel wird so aussehen:

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

Zunächst benötigen wir etwas zusätzliches HTML, um den Hauptinhalt der Webseite darzustellen. Fügen Sie den folgenden <section> direkt unter Ihrem öffnenden <body>-Tag hinzu, 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 platziert und positioniert zu bekommen. Ändern Sie Ihre .info-box-Regel, indem Sie margin: 0 auto; entfernen (wir möchten die Infobox nicht mehr zentrieren), position: fixed; hinzufügen und sie an den top des Browser-Viewports kleben.

Es sollte jetzt so aussehen:

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

Das Einzige, was für dieses Beispiel noch übrig ist, ist, dem Hauptinhalt ein wenig Stil zu verleihen. Fügen Sie die folgende Regel unter den Rest Ihres CSS hinzu:

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

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

Zuerst geben wir dem Inhalt dieselbe background-color, color und padding wie die Panels der Infobox. Dann geben wir ihm einen großen margin-left, um ihn nach rechts zu verschieben und Platz für die Infobox zu schaffen, damit sie nicht mit etwas anderem überlappt.

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

Das letzte Beispiel, das wir hier präsentieren werden, ist ein Panel, das beim Drücken eines Symbols auf dem Bildschirm ein- und ausgeblendet wird — wie bereits erwähnt, ist dies beliebt in Situationen wie mobilen Layouts, bei denen der verfügbare Bildschirmraum gering ist, sodass Sie nicht den größten Teil davon nutzen möchten, um ein Menü oder Info-Panel anstelle des nützlichen Inhalts anzuzeigen.

Unser fertiges Beispiel wird so aussehen:

Als Ausgangspunkt erstellen Sie eine lokale Kopie von hidden-info-panel-start.html aus unserem GitHub-Repository. Dies folgt nicht auf das vorherige Beispiel, daher ist eine neue Startdatei erforderlich. Schauen wir uns das HTML in der Datei an:

<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>

Zu Beginn haben wir hier ein <button>-Element mit einem speziellen Fragezeichen-Zeichen als Button-Text. Der Button wird gedrückt, um das aside-Info-Panel anzuzeigen/zu verbergen. In den folgenden Abschnitten werden wir erklären, wie dies alles funktioniert.

Lassen Sie uns zunächst den Button behandeln — 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 gestaltet den <button>; hier haben wir:

• Eine große font-size gesetzt, um das Symbol schön groß zu machen.
• Den Rand entfernt und den Hintergrund transparent gemacht, sodass stattdessen nur das ?-Symbol angezeigt wird.
• position absolute darauf gesetzt und top und right verwendet, um es schön in der oberen rechten Ecke zu positionieren.
• Einen z-index von 1 darauf gesetzt — dies ist so, dass das Info-Panel, wenn es gestylt und angezeigt wird, nicht das Symbol überdeckt; stattdessen wird das Symbol darüber sitzen, sodass es erneut gedrückt werden kann, um das Info-Panel zu verbergen.
• Die cursor-Eigenschaft verwendet, um den Mauscursor zu verändern, wenn er über dem Symbol schwebt, zu einem Handzeiger (wie der, den Sie sehen, wenn über Links gefahren wird), als zusätzlicher visueller Hinweis für Benutzer, dass das Symbol etwas Interessantes tut.

Jetzt ist es an der Zeit, das eigentliche Schiebepanel selbst zu gestalten. 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 eine Menge — lassen Sie es uns Stück für Stück besprechen:

• Zuerst setzen wir ein einfaches background-color und color auf dem Info-Panel.
• Als Nächstes setzen wir eine feste width auf das Panel und machen seine height die gesamte Höhe des Browserfensters.
• Wir fügen auch ein bisschen horizontalen padding hinzu, um es etwas Platz zu machen.
• Als Nächstes setzen wir position: fixed; auf das Panel, damit es immer an derselben Stelle erscheint, auch wenn die Seite scrollbare Inhalte hat. Wir kleben es an die top-Seite des Viewports und setzen es so, dass es standardmäßig rechts vom Bildschirm außerhalb liegt.
• Schließlich setzen wir ein transition auf das Element. Transition ist ein interessantes Feature, das es erlaubt, Änderungen zwischen Zuständen sanft vorzunehmen, statt nur abrupt auf "ein" oder "aus" zu schalten. In diesem Fall haben wir vor, das Panel sanft auf den Bildschirm gleiten zu lassen, wenn das Kontrollkästchen aktiviert ist. (Oder anders gesagt, wenn das Fragezeichen-Symbol geklickt wird.)

Es gibt noch ein letztes Stück CSS hinzuzufügen — setzen Sie das Folgende am unteren Ende Ihres CSS:

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

Die Regel besagt, dass, wenn das Info-Panel die Klasse .open gesetzt hat, die right-Eigenschaft des <aside> auf 0px gesetzt wird, was dazu führt, dass das Panel wieder auf dem Bildschirm erscheint (sanft aufgrund des Übergangs). Durch Entfernen der .open-Klasse wird das Panel wieder versteckt.

Um die .open-Klasse mit einem Klick auf den Button zum Info-Panel hinzuzufügen oder zu entfernen, müssen wir etwas JavaScript verwenden. 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 Klick-Event-Handler hinzu. Der Klick-Handler toggelt die open-Klasse auf dem Info-Box-Panel, welches das Panel in oder aus dem Sichtbereich schiebt. Der Event-Handler setzt auch die aria-expanded-Eigenschaft auf dem Button, um die Zugänglichkeit zu verbessern.

Das wäre es also — die einfachste Möglichkeit, einen umschaltbaren Info-Panel-Effekt zu erzeugen.

Damit endet unser Blick auf die Positionierung — bis jetzt sollten Sie eine Vorstellung davon haben, wie die grundlegenden Mechaniken funktionieren, sowie ein Verständnis dafür, wie man anfängt, diese einzusetzen, um einige interessante UI-Funktionen zu erstellen. Machen Sie sich keine Sorgen, wenn Sie dies nicht sofort verstanden haben — Positionierung ist ein ziemlich fortgeschrittenes Thema, und Sie können die Artikel immer wieder durchgehen, um Ihr Verständnis zu vertiefen.