Ausführliche Erläuterung der Anwendung der CSS-Positionierungssyntax

1. CSS-Positionierung:

Position: statisch | . Es gibt keine spezielle Positionierung, das Objekt folgt den HTML-Positionierungsregeln.

Absolut: Ziehen Sie das Objekt aus dem Dokumentfluss und verwenden Sie die Attribute „Links“, „Rechts“, „Oben“, „Unten“ und andere, um eine absolute Positionierung relativ zu seinem nächstgelegenen übergeordneten Objekt mit den meisten Positionierungseinstellungen durchzuführen. Wenn kein solches übergeordnetes Objekt vorhanden ist, wird das Body-Objekt verwendet. Und seine Kaskade wird durch das Z-Index-Attribut definiert.

behoben: Nicht unterstützt. Die Objektpositionierung folgt der absoluten Methode. Es gibt jedoch einige Normen, die befolgt werden müssen.

relativ: Das Objekt kann nicht gestapelt werden, sondern wird im normalen Dokumentenfluss basierend auf links, rechts, oben, unten und anderen Eigenschaften versetzt.

Beschreibung: Rufen Sie die Positionierungsmethode des Objekts ab.

Wenn Sie diesen Eigenschaftswert auf „absolut“ setzen, wird das Objekt unabhängig vom Layout des umgebenden Inhalts absolut außerhalb des normalen Dokumentflusses positioniert. Wenn andere Objekte mit unterschiedlichen Z-Index-Eigenschaften bereits eine bestimmte Position belegen, beeinflussen sie sich nicht gegenseitig und überlappen sich an derselben Position. Zu diesem Zeitpunkt verfügt das Objekt nicht über einen äußeren Patch (Rand), aber es verfügt immer noch über einen inneren Patch (Padding) und einen Rand (Rand).

Um die absolute Positionierung eines Objekts zu aktivieren, müssen Sie mindestens eine der Eigenschaften links, rechts, oben und unten angeben und den Wert dieser Eigenschaft auf „absolut“ setzen. Andernfalls verwenden die oben genannten Eigenschaften ihren Standardwert auto , was dazu führt, dass das Objekt den normalen HTML-Layoutregeln entspricht und unmittelbar nach dem vorherigen Objekt gerendert wird.

Wenn Sie diesen Eigenschaftswert auf relativ setzen, bleibt das Objekt im normalen HTML-Fluss, seine Position kann jedoch basierend auf dem vorherigen Objekt verschoben werden. Text oder Objekte, die einem relativ positionierten Objekt folgen, nehmen ihren eigenen Raum ein, ohne den natürlichen Raum des positionierten Objekts zu überschreiben. Im Gegensatz dazu nehmen Text oder Objekte, die einem absolut positionierten Objekt folgen, ihren natürlichen Platz ein, bis das positionierte Objekt aus dem normalen Dokumentfluss herausgezogen wird. Wenn Sie absolut positionierte Objekte außerhalb des sichtbaren Bereichs platzieren, werden Bildlaufleisten angezeigt. Wenn jedoch ein relativ positioniertes Objekt außerhalb des sichtbaren Bereichs platziert wird, wird die Bildlaufleiste nicht angezeigt.

Die Größe des Inhalts bestimmt die Größe des Objekts basierend auf dem Layout. Wenn Sie beispielsweise die Höhen- und Positionseigenschaften eines Div-Objekts festlegen, bestimmt der Inhalt des Div-Objekts dessen Breite.

Diese Eigenschaft ist für das currentStyle-Objekt schreibgeschützt. Es ist für andere Objekte lesbar und beschreibbar. Die entsprechende Skripteigenschaft ist position .

Beispiel:

div { position:relative; top:-3px }

2. CSS-Positionierung: Z-Index

Syntax:

z-index: auto |. number

Wert:

auto: Standardwert. Folgen Sie der Positionierung seines übergeordneten Objekts

Zahl: Ein ganzzahliger Wert ohne Einheit. Kann eine negative Zahl sein

Beschreibung:

Stapelreihenfolge von Objekten abrufen oder festlegen.

Objekte mit einem größeren Zahlenwert werden über Objekte mit einem kleineren Zahlenwert gelegt. Wenn zwei absolut positionierte Objekte den gleichen Zahlenwert für dieses Attribut haben, werden sie entsprechend der Reihenfolge gestapelt, in der sie im HTML-Dokument deklariert sind. Bei absolut positionierten Objekten, bei denen diese Eigenschaft nicht angegeben ist, befinden sich Objekte mit einem positiven Zahlenwert für diese Eigenschaft darüber und Objekte mit einem negativen Zahlenwert darunter. Wenn Sie den Parameter auf null setzen, wird diese Eigenschaft entfernt.

Diese Eigenschaft funktioniert nur bei Objekten, deren Positionseigenschaftswert relativ oder absolut ist. Diese Eigenschaft wirkt sich nicht auf Fenstersteuerelemente wie ausgewählte Objekte aus. In IE5.5+ beginnen Iframe-Objekte, dieses Attribut zu unterstützen. In früheren Browserversionen waren Iframe-Objekte Fenstersteuerelemente und diese Eigenschaft wurde ignoriert. Diese Eigenschaft ist für das currentStyle-Objekt schreibgeschützt. Es ist für andere Objekte lesbar und beschreibbar. Die entsprechende Skripteigenschaft ist zIndex .

Beispiel:

div { position:absolute; z-index:3; width:6px; }

3. CSS-Positionierung: top

Syntax ：

top: auto |. length

Wert:

auto:Standardwert. Keine spezielle Positionierung, Zuordnung im Dokumentenfluss gemäß den HTML-Positionierungsregeln.

Länge: Ein Längenwert, der aus einer Gleitkommazahl und einem Einheitenbezeichner | besteht. Der Positionsattributwert muss als absolut oder relativ definiert werden, damit dieser Wert wirksam wird.

Beschreibung:

Ruft die Position eines Objekts relativ zum oberen Rand seines aktuellsten übergeordneten Objekts mit Positionierungseinstellungen ab oder legt diese fest.

Diese Eigenschaft ist nur verfügbar, wenn die Positionseigenschaft des Objekts festgelegt ist. Andernfalls wird diese Eigenschaftseinstellung ignoriert. Diese Eigenschaft ist für das currentStyle-Objekt schreibgeschützt. Es ist für andere Objekte lesbar und beschreibbar. Das entsprechende Skriptattribut ist top . Sein Wert ist eine Zeichenfolge und kann daher nicht für Berechnungen in Skripten verwendet werden. Bitte verwenden Sie die Laufzeiteigenschaften wie posTop und pixelTop des Stilobjekts sowie offsetTop und andere Eigenschaften des Objekts.

Beispiel:

Das Folgende ist ein Zitatfragment:

div { position: absolute; top: 1in }

div { position: relative;-3px; :6px ; }

4. CSS-Positionierung: rechts

Grammatik:

　rechts: auto |. Länge

　Wert:

　auto: Standardwert. Keine spezielle Positionierung, Zuordnung im Dokumentenfluss gemäß den HTML-Positionierungsregeln.

Länge: Ein Längenwert, der aus einer Gleitkommazahl und einem Einheitenbezeichner | besteht. Der Wert des Positionsattributs muss als absolut oder relativ definiert werden, damit dieser Wert wirksam wird.

Beschreibung:

Ruft die Position eines Objekts relativ zur rechten Seite seines aktuellsten übergeordneten Objekts mit Positionierungseinstellungen ab oder legt diese fest.

Diese Eigenschaft ist nur verfügbar, wenn die Positionseigenschaft des Objekts festgelegt ist. Andernfalls wird diese Eigenschaftseinstellung ignoriert. Diese Eigenschaft ist für das currentStyle-Objekt schreibgeschützt. Es ist für andere Objekte lesbar und beschreibbar. Das entsprechende Skriptattribut ist right . Sein Wert ist eine Zeichenfolge und kann daher nicht für Berechnungen in Skripten verwendet werden. Bitte verwenden Sie die Laufzeiteigenschaften wie posRight und pixelRight des Style-Objekts.

Beispiel:

Das Folgende ist ein Zitatfragment:
div { position: absolute; 1in }
div { position: relative; :6px ; }

5. CSS-Positionierung: unten

Syntax:

unten : auto |. Länge

Wert:

auto: Standardwert. Keine spezielle Positionierung, Zuordnung im Dokumentenfluss gemäß den HTML-Positionierungsregeln.

Länge: Ein Längenwert bestehend aus einer Gleitkommazahl und einem Einheitenbezeichner |. Der Wert des Positionsattributs muss als absolut oder relativ definiert werden, damit dieser Wert wirksam wird.

Beschreibung:

Rufen Sie die Position des Objekts relativ zur Unterkante seines aktuellsten übergeordneten Objekts mit Positionierungseinstellungen ab oder legen Sie sie fest. Diese Eigenschaft ist nur verfügbar, wenn die Positionseigenschaft des Objekts festgelegt ist. Andernfalls wird diese Eigenschaftseinstellung ignoriert. Diese Eigenschaft ist für das currentStyle-Objekt schreibgeschützt. Es ist für andere Objekte lesbar und beschreibbar. Die entsprechende Skripteigenschaft ist „bottom“. Sein Wert ist eine Zeichenfolge und kann daher nicht für Berechnungen in Skripten verwendet werden. Bitte verwenden Sie die Laufzeiteigenschaften wie posBottom und pixelBottom des Style-Objekts.

Beispiel:

Das Folgende ist ein Zitatfragment:
div { position: absolute; 1in }
div { position: relative; 🎜>

6. CSS-Positionierung: links

Syntax:

links: auto |. Länge

Wert:

auto: Standard Wert . Keine spezielle Positionierung, Zuordnung im Dokumentenfluss gemäß den HTML-Positionierungsregeln.

Länge: Ein Längenwert, der aus einer Gleitkommazahl und einem Einheitenbezeichner | besteht. Der Wert des Positionsattributs muss als absolut oder relativ definiert werden, damit dieser Wert wirksam wird.

Beschreibung:

Ruft die Position eines Objekts relativ zur linken Seite seines aktuellsten übergeordneten Objekts mit Positionierungseinstellungen ab oder legt diese fest.

Diese Eigenschaft ist nur verfügbar, wenn die Positionseigenschaft des Objekts festgelegt ist. Andernfalls wird diese Eigenschaftseinstellung ignoriert. Diese Eigenschaft ist für das currentStyle-Objekt schreibgeschützt. Es ist für andere Objekte lesbar und beschreibbar. Das entsprechende Skriptattribut ist left . Sein Wert ist eine Zeichenfolge und kann daher nicht für Berechnungen in Skripten verwendet werden. Bitte verwenden Sie die Laufzeiteigenschaften wie posLeft und pixelLeft des Stilobjekts sowie offsetLeft und andere Eigenschaften des Objekts.

Beispiel:

Das Folgende ist ein Zitatfragment:

div { position: absolute; 1in }
div { position: relative;-3px; :6px ; }

Das Obige ist eine detaillierte Erklärung der Anwendung der CSS-Positionierungssyntax. Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn).