Position von CSS verstehen

Vier Attributwerte der Position:

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

 

demo1

🎜>

1. relativ

Das relative Attribut wird relativ zu seiner eigenen Position versetzt. Wenn Sie beispielsweise ein relatives Attribut von demo1 festlegen, legen Sie den folgenden CSS-Code fest:

#demo1

{
position: relative;
padding: 5px;
top: 5px;
left: 5px;
}

Nach meinem Verständnis sollte sich die Position von demo1 gemäß dem normalen Dokumentenfluss an einer bestimmten Position befinden, wenn das relative Attribut nicht festgelegt ist. Wenn die Position von demo1 jedoch auf „relativ“ eingestellt ist, wird sie entsprechend ihrer angenommenen Position entsprechend den Werten von „oben“, „rechts“, „unten“ und „links“ verschoben. Die „relative“ Bedeutung von „relativ“ spiegelt sich auch darin wider .

Denken Sie einfach daran, wo sich Demo1 befinden sollte, wenn relative nicht festgelegt ist, und versetzen Sie es, sobald es festgelegt ist, entsprechend seiner angeblichen Position.

Aber die Position von sub2 ist die ursprüngliche Position und ihre Position ändert sich nicht, da demo1 das Positionsattribut hinzufügt.

Wenn die Position von Demo2 zu diesem Zeitpunkt ebenfalls auf relativ eingestellt ist, ist sie immer noch dieselbe wie Sub1, versetzt entsprechend ihrer ursprünglichen Position.

Beachten Sie, dass der Offset von
relative auf der oberen linken Seite des Objektrands (oberer linker Scheitelpunkt) basiert.

2. absolut

Dieses Attribut ist 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 demo1 auf absolut gesetzt ist:

(1) Wenn das übergeordnete Objekt von demo1 (oder Urgroßvater, sofern es sich um ein übergeordnetes Objekt handelt) auch die Position festlegt Attribut und Positionsattribut Wenn der Wert absolut oder relativ ist, dh wenn er nicht der Standardwert ist, wird sub1 entsprechend dem übergeordneten Element positioniert.

Wenn das übergeordnete Element Attribute wie Rand, Rahmen, Innenabstand usw. festlegt, ignoriert dieser Ankerpunkt den Innenabstand und beginnt mit dem
Innenabstand (also nur ab dem Positionierung oben links in der Polsterung ausgehend von der Ecke), was sich von der Vorstellung unterscheidet, dass wir davon ausgehen würden, dass die Positionierung am oberen linken Ende des Randes beginnen würde.

Die nächste Frage ist: Wo ist der Standort von 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 Element 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 Demo1 kein übergeordnetes Objekt mit einem Positionsattribut hat, wird der Körper als Positionierungsobjekt verwendet und entsprechend dem Browserfenster positioniert. Dies ist einfacher zu verstehen.

3. fest

fest nimmt immer den Körper als Positionierungsobjekt und positioniert ihn entsprechend dem Browserfenster.

4. statisch

Der Standardwert der Position wird im Allgemeinen entsprechend dem normalen Dokumentenfluss angeordnet.