Detaillierte Erläuterung der Positionierung und Positionierungsanwendung von div+css

Erweiterte Lektüre
* Interpretation von absolut und relativ
* Position: relative/absolute Ebene, die nicht gebrochen werden kann
* Ergänzung zum Artikel „The Unbreakable Level“

Die Positionierung war schon immer eine Schwierigkeit bei der Anwendung von WEB-Standards. Wenn die Positionierung nicht klar ist, ist der Effekt, der erzielt werden sollte, möglicherweise nicht klar erreicht, und der erzielte Effekt wird möglicherweise nicht erreicht. Wenn das Positionierungsprinzip geklärt ist, wird die Webseite durch die Positionierung perfekter.

Die Definition der Positionierung:

Der Inhalt zur Positionierung ist: relativ |. statisch | 🎜>Statisch hat keine besonderen Einstellungen und folgt den grundlegenden Positionierungsvorschriften. Es kann nicht über den Z-Index hierarchisch sein.

relativ bricht nicht aus dem Dokumentfluss ab, bezieht sich durch die Positionierung oben, unten, links und rechts auf seine eigene statische Position und kann durch den Z-Index hierarchisch sein.

Absolut wird vom Dokumentenfluss getrennt und durch oben, unten, links und rechts positioniert. Wählen Sie das nächstgelegene übergeordnete Positionierungselement aus. Wenn die übergeordnete Position statisch ist, wird das absolute Element am Ursprung der Körperkoordinaten positioniert und kann über den Z-Index hierarchisch abgestuft werden.
feste feste Positionierung, hier ist das feste Objekt das visuelle Fenster und nicht der Körper oder das übergeordnete Element. Die hierarchische Klassifizierung kann über den Z-Index erfolgen.

Kaskadierende Klassifizierung der Positionierung in CSS: z-index: auto |

auto folgt der Positionierung seines übergeordneten Objekts

namber Ein einheitenloser ganzzahliger Wert. Kann negativ sein

Prinzip der Positionierung:

Elemente, die verschoben werden können (relative Positionierung)

Im Textfluss hat jedes Element seine eigene Position, die durch den Textfluss begrenzt ist, aber über CSS können wir diese Elemente trotzdem dazu bringen, ihre Position zu ändern. Wir können Float verwenden, um die Elemente zu schweben, und wir können auch Margin verwenden, um sie zu erstellen float. Das Element wird verschoben. Tatsächlich handelt es sich dabei jedoch nicht um die tatsächliche Verschiebung, da es sich lediglich um eine Täuschung handelt, die durch die Erhöhung des Margin-Werts erreicht wird. Die Verschiebung im eigentlichen Sinne wird für ein relativ positioniertes Element durch Oben, Rechts, Unten, Links (im Folgenden als TRBL bezeichnet, TRBL kann in zwei Teile unterteilt werden) erzeugt.

Und wir stellen fest, dass der Koordinatenpunkt des positionierten Elements am oberen linken Randpunkt des Randwerts liegt, also Punkt B im Bild. Dann basieren alle Verschiebungsberechnungen auf diesem Punkt, um das Element zu verschieben. Die Verschiebungsrichtung ist kohäsiv, wenn TRBL positiv ist. Daraus lässt sich schließen, dass bei negativem TRBL die Verschiebungsrichtung nach außen gerichtet ist. Im Bild zeigt ein Verschiebungspfeil auf die Markierung. Das Pluszeichen gibt die positive Verschiebungsrichtung und das Minuszeichen die negative Verschiebungsrichtung an. Bezüglich der Verschiebung und Ausrichtung können Sie weiter Yi Feis „Talk about the margin attribute from the simple to the deep (1)“ lesen

Elemente, die sich an jeder Position befinden können (absolute Positionierung)

Wie oben erwähnt: Die relative Positionierung kann die Position im Textfluss nur nach oben, unten, links und rechts verschieben. Auch wenn der Präsentationsbereich vom Textfluss getrennt ist behält einen Platz im Textfluss. Es ist wie ein Wanderarbeiter, der an andere Orte geht, aber dennoch einen exklusiven Platz in seiner Heimatstadt hat, und dieser Ort ändert sich mit seiner Bewegung nicht. Aber dadurch bleibt offensichtlich ein Leerraum übrig. Wenn Sie möchten, dass der Textfluss diesen Teil verlässt, müssen Sie die absolute Positionierung verwenden. Die absolute Positionierung löst sich nicht nur vom Textfluss, sondern lässt auch keinen exklusiven Raum für dieses absolut positionierte Element im Textfluss. Das ist wie eine Stelle in einer Fabrik, wenn ein Arbeiter die Stelle verlässt, werden natürlich andere Arbeiter die Stelle besetzen. Der Teil, der sich auf natürliche Weise herausbewegt, wird zu einem freien Körper. Durch die absolute Positionierung wird das Element über TRBL auf eine beliebige Position gesetzt. Wenn das Positionsattribut der übergeordneten Ebene der Standardwert ist, beginnt der Koordinatenursprung von TRBL am Koordinatenursprung des Körpers.

Zugehörige absolute Positionierung

Das Obige ist eine einzelne absolute Positionierung, aber in tatsächlichen Anwendungen müssen wir häufig eine spezielle Form verwenden. Das heißt, Sie möchten, dass das positionierte Element absolute Positionierungseigenschaften aufweist, hoffen aber auch, dass der Koordinatenursprung der absoluten Positionierung an einem bestimmten Punkt auf der Webseite festgelegt werden kann. Wenn dieser Punkt verschoben wird, kann das absolut positionierte Element sichergestellt werden seine relative Position relativ zu den ursprünglichen Koordinaten. Das heißt, diese absolute Positionierung muss sich mit der Webseite bewegen und an einer festen Position auf der Webseite fixiert werden. Normalerweise ist dieser Effekt besonders wichtig, wenn die Webseite zentriert ist. Der grundlegende Weg, diesen Effekt zu erzielen, besteht darin, das absolut positionierte übergeordnete Element auf relative Positionierung oder absolute Positionierung einzustellen. Dann verwenden die Koordinaten der absoluten Positionierung den übergeordneten Punkt als Startpunkt der Koordinaten.

Obwohl dies der Fall ist, ist der Koordinatenursprung nicht der Koordinatenursprung des übergeordneten Elements. Dies ist eine sehr seltsame Koordinatenposition.

Elemente, die immer im Blick sind (feste Positionierung)

Aufgrund des Missbrauchs von Werbung haben einige Browsersoftware begonnen, Werbeinhalte zu blockieren, sodass einige gute Effekte nicht mehr empfohlen werden. Beispielsweise kann ein Element beim Scrollen der Webseite kontinuierlich seine Position ändern. Jetzt kann ich einen solchen Effekt durch ein Positionierungsattribut in CSS erzielen. Dieses Elementattribut wurde in der Vergangenheit nicht unterstützt. Diese Fixierung ist der absoluten Positionierung sehr ähnlich. Der einzige Unterschied besteht darin, dass die absolute Positionierung an einer bestimmten Position auf der Webseite fixiert ist, während die feste Positionierung an der Position des Browser-Ansichtsrahmens fixiert ist.

Obwohl der ursprüngliche Browser dieses Attribut nicht unterstützte, hat die Entwicklung von Browsern es den heutigen fortschrittlichen Browsern ermöglicht, dieses CSS-Attribut korrekt zu analysieren. Und durch CSS HACK kann IE6 diesen Effekt erzielen (derzeit kann IE5.x diesen Effekt nicht erzielen). Damit dieser Artikel nicht zu lang wird, wird hier zum Abschluss dieses Artikels nur dieses Beispiel gegeben. Sie können einige Probleme zu diesem Beispiel selbst analysieren. Wenn Sie etwas nicht verstehen, hinterlassen Sie mir bitte eine Nachricht!