Heim > Web-Frontend > HTML-Tutorial > Position im CSS

Position im CSS

巴扎黑
Freigeben: 2017-06-27 09:05:18
Original
1334 Leute haben es durchsucht

1. Positionssyntax und Struktur

Positionssyntax: Position: statisch absolut relativ

Positionsparameter:
statisch: Keine spezielle Positionierung, das Objekt folgt den HTML-Positionierungsregeln
absolut: Ziehen Sie das Objekt aus dem Dokumentfluss und verwenden Sie links, rechts, oben, unten und andere Attribute für die absolute Positionierung. Und seine Kaskadierung wird durch die CSS-Z-Index-Eigenschaft definiert. Zu diesem Zeitpunkt hat das Objekt keine Ränder, aber es gibt immer noch Abstände und Ränder
relativ: Das Objekt kann nicht gestapelt werden, sondern wird im normalen Dokumentfluss basierend auf links, rechts, versetzt. oben, unten und andere Attribute

2. Bedingungen für die Verwendung der absoluten Positionierung

position:absolute;position:relativeDie Verwendung der absoluten Positionierung ist normalerweise definiert durch die übergeordnete Position: relative Positionierung, untergeordnete Ebene definiert das absolute Positionierungsattribut position: absolute, und das untergeordnete Element verwendet links oder rechts und oben oder unten für die absolute Positionierung.

3. Zusammenfassung der absoluten CSS-Positionierung

Absolute Positionierung Wenn das übergeordnete Element nicht position:relative, sondern direkt position:absolute absolute Positionierung verwendet, wird das Body-Tag als übergeordnetes Element verwendet Dieses Mal definiert die Verwendung von Position:absolute, dass das Objekt unabhängig davon, auf wie vielen Ebenen der DIV-Struktur es sich befindet, mit als übergeordnetes Element (Referenzebene) für die absolute Positionierung herausgezogen wird.

Wir können den CSS-Z-Index verwenden, um die überlappende Reihenfolge der CSS-Ebenen während der absoluten Positionierung zu definieren.

Das obige ist der detaillierte Inhalt vonPosition im CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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