CSS-Positionierungsbeispiele erklärt

Dieser Artikel stellt Ihnen hauptsächlich das CSS-Positionierungs-Tutorial vor. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Dokumentenfluss

Einfach ausgedrückt ist es der Prozess, bei dem Elemente entsprechend ihrer Positionsreihenfolge in HTML angeordnet werden. Der Layoutmechanismus von HTML verwendet das Dokumentflussmodell, dh Blockelemente belegen eine Zeile und Inline-Elemente belegen keine Zeile.

Im Allgemeinen wird ein Rand verwendet, um Elemente voneinander zu trennen; ein Abstand wird verwendet, um Elemente vom Inhalt zu trennen. Der Rand wird für das Layout verwendet, um Elemente zu trennen, sodass die Elemente unabhängig voneinander sind. Der Abstand zwischen Elementen und Inhalt wird durch Auffüllen ersetzt, um einen „Abstand“ zwischen Inhalt (Text) und (umschlossenen) Elementen zu ermöglichen. Solange es nicht in Float- oder absoluter Positionierung angeordnet ist, befindet es sich im Dokumentfluss.

2. Einführung in das Positionsattribut

1. statisch, Standardwert. Ein Element, dessen Position auf statisch festgelegt ist, befindet sich immer an der durch den Dokumentenfluss angegebenen Position.

2. inherit gibt an, dass der Wert des Positionsattributs vom übergeordneten Element geerbt werden soll. Allerdings unterstützt keine Version des Internet Explorers (einschließlich IE8) den Attributwert „inherit“.

3. fest, erzeugt absolut positionierte Elemente. Standardmäßig können Sie an angegebenen Koordinaten relativ zum Browserfenster positionieren. Die Position des

4. -Elements wird durch die Attribute „left“, „top“, „right“ und „bottom“ angegeben. Das Element bleibt an dieser Position, unabhängig davon, ob das Fenster gescrollt wird oder nicht. Wenn das Vorgängerelement jedoch über ein Transformationsattribut verfügt und nicht „none“ ist, werden die Koordinaten relativ zum Vorgängerelement und nicht zum Browserfenster angegeben.

5. absolut, erzeugt ein absolut positioniertes Element, positioniert relativ zum nächstgelegenen positionierten Vorgängerelement des Elements.

6. Die Position dieses Elements kann durch die Attribute „links“, „oben“, „rechts“ und „unten“ angegeben werden.

7. relativ, generiert ein relativ positioniertes Element, positioniert relativ zur Anfangsposition des Elements im Dokument.

8. Legen Sie den Versatz dieses Elements relativ zu seiner eigenen Position über die Attribute „links“, „oben“, „rechts“ und „unten“ fest.

3. Relative Positionierung

relativ erzeugt ein relativ positioniertes Element, das relativ zu seiner normalen Position positioniert ist.

Der Prozess der relativen Positionierung ist wie folgt:

Erzeugen Sie standardmäßig ein Element (statisch) (und das Element schwebt wie eine Ebene). Relativ zur vorherigen Positionsbewegung werden Richtung und Amplitude der Bewegung durch die Attribute links, rechts, oben und unten bestimmt. Die Position vor dem Versatz bleibt unverändert.

  <style type="text/css">     
        #box1 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #box2 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: red;
            /*position: relative;
            left: 100px;
            top: 100px;*/
        }
  </style>
  <p id="box1"></p>
  <p id="box2"></p>

Bevor der Kommentarcode in Box2 wirksam wird, wird er entsprechend dem Dokumentenfluss sortiert und dargestellt.

Wenn der Kommentarcode jedoch unkommentiert ist und wirksam wird, verschiebt er sich relativ zu der Position, an der er im Dokumentfluss angezeigt werden soll.

Das Referenzobjekt der relativen Positionierung ist also sich selbst.

4. Absolute Positionierung

Ein großer Unterschied zwischen absoluter Positionierung und relativer Positionierung besteht darin, dass, wenn wir ein Element auf absolute Positionierung setzen, das Element aus dem Dokument entfernt wird Andere Elemente gehen davon aus, dass das Element im Dokumentfluss nicht vorhanden ist, und füllen seine ursprüngliche Position aus. Ein absolut positioniertes Element verschiebt seine Position basierend auf seiner Referenz, die durch die Positionierungseinstellungen seines Vorgängerelements bestimmt wird.

Die sogenannte Bestimmung basierend auf den Positionierungseinstellungen seiner Vorgängerelemente wird einfach verstanden als: Relativ zum nächstgelegenen positionierten Vorgängerelement des Elements, wenn kein Vorgängerelement mit Positionierungssatz vorhanden ist Das Referenzobjekt ist die Körperschicht.

1. Verwenden Sie „absolut“, wenn das Vorgängerelement nicht positioniert ist. Das Referenzobjekt ist in diesem Fall der Körper.

2. Die Vorgängerelemente haben eine Positionierung. Solange das Vorgängerelement auf einen anderen Wert als position:static gesetzt ist, gilt es als positioniert und das nächstgelegene Vorgängerelement wird festgelegt zur absoluten Positionierung. In diesem Fall ist die Referenz das nächstgelegene Vorgängerelement.

3. Wenn links/rechts und oben/unten nicht festgelegt sind, ist die Position des absoluten Elements die Position des Elements im Dokumentenfluss

Verwandte Empfehlungen:

Einige Untersuchungen zu Position, Absolutheit und Relativität bei der CSS-Positionierung

Analyse der CSS-Positionierungsposition und Beispiele für Anwendungsszenarien

10 empfohlene Kurse zur CSS-Positionierung

Das obige ist der detaillierte Inhalt vonCSS-Positionierungsbeispiele erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!