|
|
Veröffentlicht am 30.10.2014 14:39:28
|
|
|
Wenn man diesen Eigenschaftswert auf absolut setzt, zieht das Objekt aus der normalen Absolutpositionierung des Dokumentflusses heraus, unabhängig vom Layout der Inhalte um ihn herum. Wenn andere Objekte mit unterschiedlichen z-Index-Eigenschaften bereits eine bestimmte Position einnehmen, beeinflussen sie sich nicht gegenseitig, sondern überlappen sich an derselben Position. Das Objekt hat keinen äußeren Fleck (Rand), sondern dennoch einen inneren Fleck (Patting) und einen Rand (Rand).
Um die absolute Positionierung eines Objekts zu aktivieren, müssen Sie mindestens eines der linken, rechts, oberen und unten Attributen angeben und diesen Attributwert auf absolut setzen. Andernfalls verwenden die oben genannten Attribute ihren Standardwert auto, wodurch das Objekt den normalen HTML-Layoutregeln folgt und unmittelbar nach dem vorherigen Objekt gerendert wird.
TRBL-Attribute (OBEN, RECHTS, UNTEN, LINKS) sind nur gültig, wenn das Positionsattribut gesetzt ist.
Du solltest Position festlegen: absolut
Wenn der Elternteil (unendlich) das Positionsattribut nicht setzt, wird das aktuelle Absolute in Kombination mit dem TRBL-Attribut in der oberen linken Ecke des Browsers als ursprünglicher Punkt positioniert
Wenn der Elternteil (unendlich) die Positionseigenschaft setzt, wird das aktuelle Absolute in Kombination mit der TRBL-Eigenschaft in der oberen linken Ecke des Elternteils (aktuell) als ursprünglichen Punkt positioniert.
Bei der Einstellung der Position: relativ
Die obere linke Ecke des übergeordneten (jüngsten) Inhaltsbereichs ist der ursprüngliche Punkt, kombiniert mit dem TRBL-Attribut (oder Versatz relativ zum vorherigen Element des positionierten Elements im übergeordneten Inhaltsbereich), und die obere linke Ecke des BODY ist der ursprüngliche Punkt ohne den Elternteil. Relative Positionierung kann nicht geschichtet werden. Bei der Verwendung der relativen Positionierung nimmt das Element weiterhin seinen ursprünglichen Raum ein, unabhängig davon, ob es bewegt wird oder nicht. Daher führt das Verschieben eines Elements dazu, dass es andere Boxen überschreibt.
Im Allgemeinen gilt: Wenn die Webseite zentriert ist, können Fehler bei Verwendung von Absolute leicht gemacht werden, da sich die Webseite immer automatisch an die Größe der Auflösung angepasst hat, während Absolute die obere linke Ecke des Browsers als ursprünglichen Punkt verwendet und die Position aufgrund der Auflösung nicht ändert. Manchmal ist es auch notwendig, sich auf den z-Index zu verlassen, um die Beziehung zwischen oberem und unterem Teil des Behälters festzulegen; je größer der Wert, desto höher der obere, und der numerische Bereich ist eine natürliche Zahl. Natürlich sollte man beachten, dass die Eltern-Kind-Beziehung nicht mit z-Index festgelegt werden kann und das Kind-Level über und unter dem Elternteil liegen muss.
Wenn dieser Eigenschaftswert auf relativ gesetzt wird, bleibt das Objekt im normalen HTML-Fluss, aber seine Position kann je nach vorherigem Objekt versetzt werden. Text oder Objekte, die einem relativen Locator folgen, nehmen ihren eigenen Raum ein, ohne den natürlichen Raum des zu positionierenden Objekts zu bedecken. Im Gegensatz dazu nimmt der Text oder das Objekt nach dem absoluten Positionierungsobjekt seinen natürlichen Raum ein, bevor das Zielobjekt aus dem normalen Dokumentfluss weggezogen wird. Platziert man ein absolutes Positionsobjekt außerhalb des Sichtfensters, erscheint eine Scrollleiste. Das Platzieren eines relativ positionierenden Objekts außerhalb des Sichtbereichs erscheint nicht mit einer Scrollleiste. Tatsächlich besteht das Hauptproblem bei der Positionierung darin, sich die Bedeutung jeder Positionierung zu merken. Relative Positionierung ist die Anfangsposition des Elements "relativ" zum Dokumentfluss, während absolute Position das Vorfahrelement ist, das "relativ" zum jüngsten Element positioniert wurde.
Hier sind die Ergänzungen:
Obwohl ich die absolute (absolute) und relative Positionierung von CSS kenne, habe ich die relevanten Effekte nie selbst geschrieben!
Nach mehr als einem halben Tag Arbeit kann es als abgeschlossen gelten! Ich habe auch einige dieser beiden Eigenschaften herausgefunden!
Die Zusammenfassung lautet wie folgt:
Schauen wir uns zunächst die folgende Schichtstruktur an
<body>
<div id=posi>
<div id=rel> Diese Schicht gilt nur position:relativ; Stil </div>
<div id=abs> Diese Ebene gilt nur für position:absolut; Stil </div>
<div id=sss> wendet keine <div>Stile an
</div>
</body>
1. absolut: nimmt keinen Sitz ein, relativ: hat einen Platz!
Wie zum Beispiel die Aufbauten:
Schichten mit id-Rel nehmen eine Zeile ein, wenn sie angezeigt werden! Die ABS-Schicht dahinter wird nur in der nächsten Zeile angezeigt!
Wenn die Ebene mit der ID ABS angezeigt wird, überlappt sie sich mit der ID des dahinterliegenden SSS!
2. Standardmäßig (nicht in Kombination mit oben positioniert) wird absolut (absolute Positionierung) von der Elternschicht positioniert
Zum Beispiel, wenn die obige Ebene mit ID ABS ist, und sie nicht in Kombination mit TOP positioniert ist, befindet sich ihre Anzeigeposition mit der übergeordneten POSI-Ebene (POSI befindet sich in der unteren linken Ecke des Dokuments und auch in der unteren linken Ecke)
3. Beim Kombinieren von oben, unten, rechts, links und anderen Attributen wird absolut (absolute Positionierung) mit dem Fenster als Positionierung positioniert und das relative mit seiner eigenen Belegung als Basislinie versetzt! Wie folgt:
<body>
<div id=posi>
<div id=sss> wendet keine <div>Stile an
<div id=rel> Diese Schicht wendet Position:Relative an; Bottom:30px; Stil </div>
<div id=abs> Diese Ebene gilt nur für position:absolut; Bottom:30px; Stil </div>
</div>
</body>
Obenstehender Code:
Die Schicht mit der id-Rel bewegt sich nach oben und überlappt die Schicht mit der id-SSS
Die Schicht mit ID ABS wird 30 Pixel vom Fenster entfernt verschoben, wobei das Fenster die Basis bildet!
4. Beim Kombinieren von oben, unten, rechts, links und anderen Attributen, wenn du möchtest, dass absolute (absolute Positionierung) die Elternschicht als Positionierungsbasis nutzt, kannst du absolute oder relative Attribute auf die Elternschicht anwenden! Wie folgt:
<body>
<div id=posi style="position:relative">
<div id=rel> Diese Schicht wendet Position:Relative an; Bottom:30px; Stil </div>
<div id=abs> Diese Ebene gilt nur für position:absolut; Bottom:30px; Stil </div>
</div>
</body>
Der obige Code: id ist die Schicht von Posi, du kannst auch das absolute Attribut verwenden!
id ist die Schicht des Relativ, die nicht betroffen ist und durch einen eigenen Platzhalter als Basislinie versetzt wird!
Die Schicht mit ID als ABS basiert auf der unteren Kante der POSI-Schicht als Positionierungsbasislinie; wenn die Höhe der POSI-Schicht zu diesem Zeitpunkt weniger als 30 px beträgt, kann die ABS-Schicht sie möglicherweise nicht sehen!
|
Vorhergehend:Wu Ruans Schüler, bitte geht nicht nach "Guangbutun", um einen Computer zu kaufen! Um nicht getäuscht zu werden!Nächster:Wie entferne ich den Unterstrich eines Hyperlinks in HTML?
|
