Viele andere Eigenschaften von CSS sind meist leicht zu verstehen, wie Schriftarten, Text, Hintergrund usw. In einigen CSS-Büchern werden diese einfachen Eigenschaften ebenfalls mit großem Tamtam vorgestellt, es wird jedoch versäumt, einige schwierige Eigenschaften zu erklären, was im Verdacht steht, das Wichtige zu meiden und es einfach zu machen. Zu den Haupteigenschaften in CSS, die schwer zu verstehen sind, gehören die Boxstruktur und die Positionierung. So wie die Position alles ist, geht es in diesem Artikel hauptsächlich um das Verständnis der Position und wir möchten Ihnen nach der Lektüre dieses Artikels ein möglichst umfassendes Verständnis der Position vermitteln.
Vier Attributwerte der Position:
relativ
absolut
fest
statisch
Die vier Eigenschaften werden im Folgenden beschrieben.
sub1
sub2
1. 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;
left: 5px;
}
Hierfür müssen Sie sich nur merken, wo sub1 sein sollte, wenn Sie nicht „relativ“ festlegen, und sobald es festgelegt ist, entsprechend versetzen, wo es sein sollte.
Die nächste Frage ist: 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 auch 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.
2. absolut
Dieses Attribut 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 Urgroßvater, solange es ein übergeordnetes Objekt ist) das übergeordnete Objekt auch das Positionsattribut festlegt und der Attributwert der Position ist absolut oder relativ, auch Das heißt, wenn es nicht der Standardwert ist, wird sub1 entsprechend diesem übergeordneten Element positioniert.
Beachten Sie, dass, obwohl das Objekt bestimmt wurde, einige Details Ihre Aufmerksamkeit erfordern. Welchen Positionierungspunkt des übergeordneten Objekts sollten wir zur Positionierung verwenden? Wenn das übergeordnete Element Attribute wie Rand, Rahmen, Abstand usw. festlegt, ignoriert dieser Positionierungspunkt den Abstand und wird dort positioniert, wo der Abstand beginnt (d. h. nur ab der oberen linken Ecke des Abstands). unterscheidet sich von dem, was wir für selbstverständlich halten würden. Die Idee, das obere linke Ende des Randes zu positionieren, ist anders.
Die nächste Frage ist: Wo ist die Position 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 dazu gehört
Wie die übergeordnete Ebene wird sie in DreamWeaver als „Ebene“ bezeichnet, bedeutet aber eigentlich dasselbe. Zu diesem Zeitpunkt erhält sub2 die Position von sub1 und sein Dokumentenfluss basiert nicht mehr darauf
sub1, startet aber direkt vom übergeordneten Element.
(2) Wenn sub1 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. Fixed
Fixed ist ein spezielles Absolutes, das heißt, Fixed 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.
Wenn es technische oder darstellungstechnische Probleme mit diesem Artikel gibt, hinterlassen Sie bitte eine Nachricht. Vielen Dank fürs Lesen!
Ausführlichere Erläuterungen zur CSS-Position und verwandte Artikel finden Sie auf der chinesischen PHP-Website!
