Detaillierte Erklärung der Verwendung des Positionsattributs in HTML (vier Typen)

Die vier Eigenschaftswerte von Position sind:

1.Verwandter
2.absolut
3. behoben
4.statisch

Diese vier Attribute werden unten beschrieben.

<div id="übergeordnet">
     <div id="unter1">unter1</div>
     <div id="sub2">sub2</div>
</div>

1. relativ

Die relative Eigenschaft ist relativ einfach. Wir müssen herausfinden, zu welchem ​​Objekt sie relativ versetzt ist. Die Antwort ist der Standort selbst. Im obigen Code sind sub1 und sub2 Geschwister. Wenn Sie beispielsweise ein relatives Attribut für sub1 festlegen, legen Sie den folgenden CSS-Code fest:

#unter1
{
    Position: relativ;
    Polsterung: 5px;
    oben: 5px;
    links: 5px;
}

Wir können es so verstehen: Wenn das relative Attribut nicht festgelegt ist, sollte die Position von sub1 gemäß dem normalen Dokumentfluss an einer bestimmten Stelle sein. Wenn die Position von sub1 jedoch auf relativ eingestellt ist, wird sie entsprechend den Werten oben, rechts, unten und links entsprechend der gewünschten Position verschoben. Die "relative" Bedeutung von relativ spiegelt sich hier wider.

Hierzu müssen Sie sich nur merken, wo „sub1“ sein sollte, wenn „relative“ nicht festgelegt ist, und es, sobald es festgelegt ist, entsprechend an die gewünschte Stelle verschieben.

Die nächste Frage lautet: Wo befindet sich Sub2? Die Antwort ist, dass es dort ist, wo es ursprünglich war, und seine Position wird sich nicht ändern, da sub1 das Positionsattribut hinzugefügt hat.

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

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

2. absolut

Dieses Attribut ist immer irreführend. Es ist falsch zu sagen, dass wenn das Positionsattribut auf absolut gesetzt ist, die Positionierung immer entsprechend dem Browserfenster erfolgt. Tatsächlich ist dies die Eigenschaft des festen Attributs.

Wenn die Position von Sub1 auf absolut gesetzt ist, wer ist dann das Objekt für den Offset? Hier gibt es zwei Situationen:

(1) Wenn das übergeordnete Objekt (oder der Urgroßvater, sofern es ein übergeordnetes Objekt ist) von sub1 ebenfalls das Positionsattribut festlegt und der Wert des Positionsattributs absolut oder relativ ist, d. h. nicht der Standardwert ist, wird sub1 entsprechend diesem übergeordneten Objekt positioniert.

Beachten Sie, dass das Objekt zwar bestimmt wurde, es jedoch einige Details gibt, die Ihre Aufmerksamkeit erfordern, d. h. welchen Ankerpunkt des übergeordneten Objekts sollen wir für die Positionierung verwenden? Wenn das übergeordnete Element Eigenschaften wie Ränder, Rahmen, Polsterung usw. festlegt, ignoriert dieser Ankerpunkt die Polsterung und wird vom Anfang der Polsterung aus positioniert (d. h. nur von der oberen linken Ecke der Polsterung aus), d. h. die Polsterung wird ignoriert, Ränder und Rahmen jedoch nicht.

Die nächste Frage lautet: Wo befindet sich Sub2? Denn wenn die Position auf absolut gesetzt ist, läuft sub1 über den normalen Dokumentfluss hinaus, so als ob es nicht zum übergeordneten Element gehört, sondern nach oben schwebt. In DreamWeaver wird es als „Ebene“ bezeichnet, was eigentlich dasselbe bedeutet. An diesem Punkt 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 einem Positionsattribut besitzt, wird der Body als Positionierungsobjekt verwendet und die Positionierung erfolgt entsprechend dem Browserfenster. Dies ist relativ einfach zu verstehen.

3. behoben

fixed ist ein spezielles Absolut, das heißt, fixed nimmt immer body als Positionierungsobjekt und positioniert sich entsprechend dem Browserfenster. Auch wenn Sie die Bildlaufleiste ziehen, ändert sich ihre Position nicht. Ähnlich wie background-attachment:fixed

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

4. statisch

Der Standardwert der Position, wenn das Positionsattribut nicht festgelegt ist, besteht darin, die Elemente entsprechend dem normalen Dokumentfluss anzuordnen.

Zusammenfassen

Oben ist die vom Editor eingeführte Verwendung von Position in HTML. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!