Heim > Web-Frontend > CSS-Tutorial > Detaillierte Einführung in die absolute und relative Positionierung in CSS

Detaillierte Einführung in die absolute und relative Positionierung in CSS

高洛峰
Freigeben: 2017-03-27 09:13:17
Original
2079 Leute haben es durchsucht

Die hierarchische Beziehung ist:

Rendering:

Detaillierte Einführung in die absolute und relative Positionierung in CSS

erfolgt nach Änderung des Referenzobjekts (oranges Feld) Die hierarchische Beziehung des Effekts
ist:

Rendering:

Detaillierte Einführung in die absolute und relative Positionierung in CSS

Die Referenzobjekt ist das oberste Element.
Die hierarchische Beziehung ist:

Rendering:

Detaillierte Einführung in die absolute und relative Positionierung in CSS

Die Situation, bei der nur das Randattribut verwendet wird zum Layout absolut positionierter Elemente
In diesem Fall haben die Werte von margin-bottom und margin-right keinen Einfluss mehr auf das Element im Dokumentfluss, da das Element aus dem Dokumentfluss getrennt wurde. Darüber hinaus wird das Referenzobjekt unabhängig davon, ob sein Vorgängerelement positioniert ist oder nicht, von seiner ursprünglichen Position im Dokumentenfluss versetzt.
In Abbildung 9 wird das Randattribut verwendet, um relativ positionierte Elemente anzuordnen.
Die hierarchische Beziehung ist:

Rendering:

Detaillierte Einführung in die absolute und relative Positionierung in CSS

Im Fall von IE6, dort Befinden sich keine Geschwisterknoten vor box2 , dann hat der Wert von margin-left doppelte Ränder, siehe Abbildung 10.
Die hierarchische Beziehung ist:

Rendering:

Detaillierte Einführung in die absolute und relative Positionierung in CSS

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die absolute und relative Positionierung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage