Die Positionierung von CSS ist seit langem ein wichtiger Bestandteil bei der Erstellung von Website-Layouts. Trotz des Aufkommens von CSS-Layouttechniken wie Flexbox und CSS Grid hat Positionierung immer noch einen wichtigen Platz in der Trickkiste jedes Webdesigners.
Wenn Sie die CSS-Positionierung verwenden, müssen Sie zunächst die CSS-Eigenschaft für position festlegen, um dem Browser mitzuteilen, ob Sie die absolute oder relative Positionierung für ein bestimmtes Element verwenden möchten. Sie müssen auch den Unterschied zwischen diesen beiden Positionierungseigenschaften verstehen.
Absolut und relativ sind die beiden im Webdesign am häufigsten verwendeten CSS-Positionseigenschaften. In der Positionseigenschaft gibt es jedoch vier Zustände:
- statisch
- absolut
- relativ
- Fest
Statische Positionierung
Statisch ist die Standardposition für jedes Element auf einer Webseite. Wenn Sie die Position eines Elements nicht definieren, ist es statisch. Dies bedeutet, dass es auf dem Bildschirm angezeigt wird, je nachdem, wo es sich im HTML-Dokument befindet und wie es im normalen Fluss des Dokuments angezeigt wird.
Wenn Sie Positionierungsregeln anwenden, z oben oder links Bei einem Element mit einer statischen Position werden diese Regeln ignoriert und das Element bleibt dort, wo es im normalen Dokumentenfluss angezeigt wird. Wenn überhaupt, müssen Sie selten ein Element auf eine statische Position in CSS setzen, da dies der Standardwert ist.
Absolute CSS-Positionierung
Die absolute Positionierung ist wahrscheinlich die am einfachsten zu verstehende CSS-Position. Sie beginnen mit dieser CSS-Positionseigenschaft:
Position: absolut;
Dieser Wert teilt dem Browser mit, dass alles, was positioniert werden soll, aus dem normalen Dokumentenfluss entfernt und stattdessen an einer exakten Position auf der Seite platziert werden sollte. Dies wird basierend auf dem nächstliegenden nicht statisch positionierten Vorfahren dieses Elements berechnet. Da ein absolut positioniertes Element aus dem normalen Fluss des Dokuments genommen wird, wirkt sich dies darauf aus, wie die Elemente vor oder nach ihm im HTML-Code auf der Webseite positioniert werden. Wenn Sie beispielsweise eine Division mit einem relativen Wert und innerhalb dieser Division positionieren, haben Sie einen Absatz, den Sie 50 Pixel vom oberen Rand der Division aus positionieren möchten, und fügen einen Positionswert von hinzu absolut zu diesem Absatz zusammen mit einem Offset-Wert von 50px auf der oben Eigenschaft wie diese: Position: absolut;oben: 50px;
Dieses absolut positionierte Element zeigt immer 50 Pixel von der relativ positionierten Abteilung an, unabhängig davon, was sonst im normalen Fluss angezeigt wird. Ihr absolut positioniertes Element verwendet das relativ positionierte Element als Kontext, und der von Ihnen verwendete Positionswert ist relativ dazu. Die vier Positionierungseigenschaften, die Sie verwenden können, sind: Sie können beide verwenden oben oder Unterseite - da ein Element nicht nach diesen beiden Werten positioniert werden kann - und auch nicht Recht oder links. Wenn ein Element auf eine absolute Position gesetzt ist, es aber keine nicht statisch positionierten Vorfahren hat, wird es relativ zum body-Element positioniert, das das Element der höchsten Ebene der Seite ist. Bei der relativen Positionierung werden dieselben vier Positionierungseigenschaften wie bei der absoluten Positionierung verwendet. Anstatt jedoch die Position des Elements auf den nächstgelegenen nicht statisch positionierten Vorfahren zu stützen, beginnt er dort, wo sich das Element befinden würde, wenn es sich noch im normalen Fluss befände. Zum Beispiel, wenn Sie drei Absätze auf Ihrer Webseite haben und der dritte einen Position: relativ Daraufhin wird die Position auf der aktuellen Position versetzt. Absatz 1. Absatz 2. Absatz 3. In dem obigen Beispiel befindet sich der dritte Absatz 2em von der linken Seite des Containerelements, aber immer noch unter den ersten beiden Absätzen. Es bleibt im normalen Fluss des Dokuments und ist geringfügig versetzt. Wenn Sie es in ändern Position: absolutAlles, was danach folgt, wird darüber angezeigt, da es sich nicht mehr im normalen Fluss des Dokuments befindet. Elemente auf einer Webseite werden häufig verwendet, um einen Wert von festzulegen Position: relativ ohne Offset-Wert, dh das Element bleibt genau dort, wo es im normalen Fluss erscheinen würde. Dies geschieht lediglich, um das Element als einen Kontext festzulegen, gegen den andere Elemente absolut positioniert werden können. Zum Beispiel, wenn Sie einen Bereich um Ihre gesamte Website mit einem Klassenwert von ContainerDies ist ein übliches Szenario im Webdesign. Diese Abteilung kann auf eine Position von gesetzt werden relativ damit alles, was sich darin befindet, als Positionierungskontext verwendet werden kann. Feste Positionierung ist der absoluten Positionierung sehr ähnlich. Die Position des Elements wird auf dieselbe Weise wie das absolute Modell berechnet. Feste Elemente werden dann an diesem Ort fixiert - fast wie ein Wasserzeichen. Alles andere auf der Seite rollt dann an diesem Element vorbei. Um diesen Eigenschaftswert zu verwenden, legen Sie Folgendes fest: Position: feststehend;
Denken Sie daran, wenn Sie ein Element auf Ihrer Site fixieren, wird es an dieser Stelle gedruckt, wenn Ihre Webseite gedruckt wird. Wenn Ihr Element beispielsweise oben auf Ihrer Seite fixiert ist, wird es oben auf jeder gedruckten Seite angezeigt, da es oben auf der Seite fixiert ist. Sie können Medientypen verwenden, um zu ändern, wie die gedruckten Seiten feste Elemente anzeigen: @media screen { h1 # erste {Position: fest; } } @media print { h1 # erste {position: statisch; } }
Relative Positionierung
Was ist mit fester Positionierung?
