Wie verwende ich Position und Float in HTML?

Syntax:

Position: statisch (statische Positionierung) |. relativ (feste Positionierung) | >statisch: statische Positionierung, keine spezielle Positionierung, das Objekt folgt den HTML-Positionierungsregeln (der Standardstatus von HTML)

absolut: absolute Positionierung, das Objekt befindet sich außerhalb des Dokumentflusses und Sie müssen links verwenden, Oben, rechts, unten und andere Attribute für eine genaue Position. Sie können das Z-Index-Attribut zur Kaskadierung verwenden. (Wenn das Element bei Verwendung der absoluten Positionierung schwebt und sich nicht an der von Ihnen angegebenen Position befindet, können Sie die relative Positionierung für das übergeordnete Element des Elements verwenden. „Persönlicher Vorschlag“)

relativ: relative Positionierung, das Objekt tut dies Der Dokumentenfluss kann nicht wie ein absoluter Prozess kaskadiert werden, aber Attribute wie links, oben, rechts und unten müssen weiterhin verwendet werden, um sich relativ zur ursprünglichen Objektposition im normalen Dokumentenfluss zu bewegen, und die ursprüngliche Position wird von anderen eingenommen Elemente.

behoben: Durch die feste Positionierung, getrennt vom Dokumentenfluss, kann das Element an einer festen Position auf dem Bildschirm gehalten werden, und die Elementposition ändert sich nicht, selbst wenn die Bildlaufleiste nach unten gezogen wird.

p111111 verschiebt sich um 150 Pixel nach unten und 200 Pixel nach rechts

<p  style="border=“1px  solid red；position：absolute；top：150px；left：200px；">我是p111111</p>

p222222 verschiebt sich um 150 Pixel vom unteren Rand und 100 Pixel vom rechten Rand

Wann Sie möchten Um ein Modul zu erstellen, das immer in der unteren rechten Ecke der Seite angezeigt wird, können Sie festlegen, dass p 50 Pixel vom unteren Rand und 50 Pixel vom rechten Rand entfernt angezeigt wird Ihre Seite ändert sich, p wird immer an der gleichen Position in Ihrem Sichtbereich angezeigt

<p  style="border=“1px  solid red；position：absolute；bottom：50px；right：100px；">我是p222222</p>

z-index: 100px; je höher der Wert von p 🎜>

Syntax:

float : left | left | none right, left or not used (Standard)

float: außerhalb des Dokumentflusses, float ist relativ zum übergeordneten Element Element

wie oben: p1 ist das übergeordnete Element von p2, p2 kann nur innerhalb von p1 schweben

Eine häufig verwendete Situation für das Schweben ist die Verwendung horizontaler Navigationsleisten. Es gibt zwei Möglichkeiten, die horizontale Navigationsleiste zu implementieren. Solange das Anzeigeattribut des li-Tags in den Inline-Stil geändert wird, kann die Liste gekachelt werden. Dies ist der Kernteil, aber nachdem wir das Box-Modell verstanden haben, können wir es wissen dass der Rand und die Auffüllung des Inline-Tags entgegengesetzt sind. Nur die linke und rechte Seite der Liste können hier gestreckt werden. Nur die obere und untere Richtung Die Richtungen der Beschriftungen auf Blockebene werden gesteuert.

<p  id="p1">
　　<p  id="p2"></p>
</p>

float ist auch eine einfache Anwendung einiger Textumbruch-Bildeffekte. Platzieren Sie das Bild und den Text in demselben p und geben Sie dem Bild und p dann einen float: left |

Das obige ist der detaillierte Inhalt vonWie verwende ich Position und Float in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!