Detaillierte Erläuterung der Verwendung des Positionsattributs in HTML (vier Typen)

Die vier Attributwerte der Position:

1.relativ

2. absolut

3.behoben

4.statisch

Diese vier Attribute werden im Folgenden beschrieben.

 <div id=parent> <div id=sub1>sub1</div> <div id=sub2>sub2</div></div>

Das relative Attribut ist relativ einfach. Wir müssen herausfinden, von welchem ​​Objekt es versetzt ist. Die Antwort liegt in seinem Standort. Im obigen Code stehen sub1 und sub2 in einer Geschwisterbeziehung. Wenn Sie beispielsweise ein relatives Attribut von sub1 festlegen, legen Sie den folgenden CSS-Code fest:

 #sub1{ position: relative; padding: 5px; top: 5px;}

Wir können verstehen, dass die Position von sub1 gemäß dem normalen Dokumentenfluss an einer bestimmten Position liegen sollte, wenn das relative Attribut nicht festgelegt ist. Wenn die Position von sub1 jedoch auf „relativ“ gesetzt ist, wird sie entsprechend ihrer angenommenen Position entsprechend den Werten von „oben“, „rechts“, „unten“ und „links“ verschoben. Dies spiegelt auch die relative Bedeutung von „relativ“ wider.

Dazu müssen Sie sich nur merken, wo sub1 sein sollte, wenn Sie nicht „relativ“ festlegen, und es von der Stelle versetzen, an der es sein sollte, sobald es festgelegt ist.

Die anschließende Frage lautet: Wo ist die Position von sub2? Die Antwort ist, wo es vorher war und wo es jetzt ist. Seine Position wird sich nicht ändern, da sub1 das Positionsattribut hinzufügt.

Was passiert, wenn die Position von sub2 zu diesem Zeitpunkt ebenfalls auf relativ gesetzt ist? Zu diesem Zeitpunkt ist es immer noch dasselbe wie sub1, versetzt entsprechend seiner ursprünglichen Position.

Beachten Sie, dass der relative Versatz auf der oberen linken Seite des Objektrands basiert.

Diese Eigenschaft ist immer irreführend. Es heißt, wenn das Positionsattribut auf „absolut“ gesetzt ist, wird es immer entsprechend dem Browserfenster positioniert. Dies ist tatsächlich falsch. Tatsächlich ist dies ein Merkmal fester Eigenschaften.

Wenn die Position von sub1 auf „absolut“ eingestellt ist, wer wird dann als zu versetzendes Objekt verwendet? Hier gibt es zwei Situationen:

(1) Wenn das übergeordnete Objekt von sub1 (oder der Urgroßvater, sofern es sich um ein übergeordnetes Objekt handelt) das übergeordnete Objekt auch das Positionsattribut festlegt und der Attributwert der Position absolut oder relativ ist, dh nicht der Standardwert, dann folgt sub1. Dieses übergeordnete Element wird zur Positionierung verwendet.

Beachten Sie, dass, obwohl das Objekt bestimmt wurde, einige Details Ihre Aufmerksamkeit erfordern, d. h. welchen Positionierungspunkt des übergeordneten Elements sollten wir zum Positionieren verwenden? Wenn das übergeordnete Element Attribute wie Rand, Rand, Innenabstand usw. festlegt, ignoriert dieser Positionierungspunkt den Innenabstand und wird am Anfang des Innenabstands positioniert (d. h. nur ab der oberen linken Ecke des Innenabstands). Das heißt, wenn Sie die Polsterung ignorieren, werden Rand und Rand natürlich nicht ignoriert.

Die nächste Frage ist: Wo befindet sich sub2? Denn wenn die Position auf „absolut“ gesetzt ist, führt dies dazu, dass sub1 den normalen Dokumentfluss überläuft, als ob es nicht zum übergeordneten Dokument gehört, es wird in DreamWeaver als Ebene bezeichnet, bedeutet aber tatsächlich dasselbe. Zu diesem Zeitpunkt erhält sub2 die Position von sub1 und sein Dokumentenfluss basiert nicht mehr auf sub1, sondern beginnt direkt beim übergeordneten Element.

(2) Wenn sub1 kein übergeordnetes Objekt mit Positionsattributen hat, wird der Körper als Positionierungsobjekt verwendet und entsprechend dem Browserfenster positioniert. Dies ist einfacher zu verstehen.

Fest ist ein spezielles Absolutwert, das heißt, fest verwendet immer den Körper als Positionierungsobjekt und wird entsprechend dem Browserfenster positioniert. Auch wenn die Bildlaufleiste gezogen wird, ändert sich ihre Position nicht. Ähnlich wie „background-attachment:fixed“.

Natürlich scheint es unter Dreamweaver keine Unterstützung zu geben

Der Standardwert für Position: Wenn das Positionsattribut nicht festgelegt ist, wird es gemäß dem normalen Dokumentenfluss angeordnet.

Das Obige ist die vom Herausgeber eingeführte Verwendung der Position in HTML. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!