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.

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

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

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

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>

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!