Praktische Beispiele für Positionierung
Dieser Artikel zeigt, wie man einige realitätsnahe Beispiele erstellt, um zu veranschaulichen, welche Arten von Dingen mit der Positionierung möglich sind.
Voraussetzungen: | Grundkenntnisse in HTML (studieren Sie Einführung in HTML), und eine Vorstellung davon, wie CSS funktioniert (studieren Sie Einführung in CSS). |
---|---|
Ziel: | Ein Verständnis für die Anwendungsmöglichkeiten von Positionierung erlangen |
Eine Registerkarten-Infobox
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:
Hinweis: Sie können das fertige Beispiel live unter tabbed-info-box.html (Quellcode) sehen. Schauen Sie es sich an, um eine Vorstellung davon zu bekommen, was Sie in diesem Abschnitt des Artikels erstellen werden.
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.
Allgemeine Einrichtung
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.
Styling unserer Registerkarten
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;
}
Hinweis: Wir verwenden in diesem Beispiel überall Nachfahren-Selektoren mit .info-box
am Anfang der Kette — dies ist so, dass wir diese Funktion in eine Seite mit bereits vorhandenem Inhalt einfügen können, ohne Befürchtungen, die auf andere Teile der Seite angewandten Stile zu beeinflussen.
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;
}
Styling der Panels
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 clear
en 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 position
ieren 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;
}
JavaScript
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 alletablist
-Elemente initialisiert. -
Wenn ein
TabsManual
-Objekt erstellt wird, werden im Konstruktor alle Registerkarten- und Panel-Referenzen in den Variablentabs
undtabpanels
gesammelt, sodass wir später leicht Dinge mit ihnen machen können. -
Der Konstruktor registriert auch
click
undkeydown
-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 deraria-selected
-Eigenschaft auffalse
zu deselektieren und durch Setzen deris-hidden
-Klasse auf den entsprechenden Panels. - An der ausgewählten Registerkarte (
currentTab
) wirdaria-selected
auftrue
gesetzt und dieis-hidden
-Klasse wird vom entsprechenden Panel entfernt.
- Eine
-
Der Code hat auch Logik, um die Navigation mit der Tastatur mit den Tasten
Linker Pfeil
,Rechter Pfeil
,Home
undEnde
zu unterstützen.
Eine fest-positionierte Infobox mit Registerkarten
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:
Hinweis: Sie können das fertige Beispiel live unter fixed-info-box.html (Quellcode) sehen. Schauen Sie es sich an, um eine Vorstellung davon zu bekommen, was Sie in diesem Abschnitt des Artikels erstellen werden.
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.
HTML-Ergänzungen
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>
Hinweis: Sie können gerne den gefälschten Inhalt durch echten Inhalt ersetzen, wenn Sie möchten.
Änderungen am bestehenden CSS
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;
}
Styling des Hauptinhalts
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.
Ein verborgenes Schiebepanel
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:
Hinweis: Sie können das fertige Beispiel live unter hidden-info-panel.html (Quellcode) sehen. Schauen Sie es sich an, um eine Vorstellung davon zu bekommen, was Sie in diesem Abschnitt des Artikels erstellen werden.
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.
Styling des Buttons
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 undtop
undright
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.
Styling des Panels
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
undcolor
auf dem Info-Panel. - Als Nächstes setzen wir eine feste
width
auf das Panel und machen seineheight
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 dietop
-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.)
Setzen des Aktivierungszustands
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.
Zusammenfassung
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.