Heim > Web-Frontend > HTML-Tutorial > Wie verwende ich CSS zur Positionierung? Detaillierte Erläuterung des CSS-Layouts und der Positionierung

Wie verwende ich CSS zur Positionierung? Detaillierte Erläuterung des CSS-Layouts und der Positionierung

云罗郡主
Freigeben: 2018-10-31 17:29:17
Original
2862 Leute haben es durchsucht

Wie verwende ich CSS zur Positionierung? CSS kann Ihnen bei der Positionierung von HTML-Elementen helfen. Sie können jedes HTML-Element an einer beliebigen Stelle platzieren. Sie können angeben, ob das Element relativ zu seiner natürlichen Position auf der Seite oder basierend auf der Definition seines übergeordneten Elements positioniert werden soll. Nachfolgend erklären wir das CSS-Layout und die Positionierung.

Wie verwende ich CSS zur Positionierung? Detaillierte Erläuterung des CSS-Layouts und der Positionierung

1: Relative Positionierung

Relative Positionierung ändert die Position eines HTML-Elements relativ zu seiner normalen Anzeigeposition. left:20 fügt 20 Pixel zur LINKEN Position des Elements hinzu. [Empfohlene Lektüre: Detaillierte Erläuterung der relativen Positionierung, der absoluten Positionierung und der festen Positionierung]

Sie können die oberen und linken Werte sowie das Positionsattribut verwenden um HTML-Elemente an eine beliebige Stelle im Dokument in HTML zu verschieben.

Nach links verschieben – Negative Werte für die linke Seite verwenden.

Nach rechts verschieben – links positive Werte verwenden.

Nach oben verschieben – Verwenden Sie den negativen Wert oben.

Nach unten bewegen – positiven Wert für oben verwenden.

Hinweis – Sie können die unteren oder rechten Werte auch auf die gleiche Weise wie die oberen und linken Werte verwenden.

2: Absolute Positionierung

Position: Das absolute Element befindet sich an den angegebenen Koordinaten relativ zur oberen linken Ecke des Bildschirms.

Sie können ein HTML-Element an eine beliebige Position in einem HTML-Dokument verschieben, indem Sie zwei Werte, top und left, und das Positionsattribut verwenden.

Nach links verschieben – Negative Werte für die linke Seite verwenden.

Nach rechts verschieben – links positive Werte verwenden.

Nach oben verschieben – Verwenden Sie den negativen Wert oben.

Nach unten bewegen – positiven Wert für oben verwenden.

Hinweis – Sie können die unteren oder rechten Werte auch auf die gleiche Weise wie die oberen und linken Werte verwenden.

Drei: Feste Positionierung

Mit der festen Positionierung können Sie die Position eines Elements unabhängig vom Scrollen an einer bestimmten Stelle auf der Seite fixieren. Die angegebenen Koordinaten beziehen sich auf das Browserfenster.

Sie können ein HTML-Element an eine beliebige Position in einem HTML-Dokument verschieben, indem Sie zwei Werte, top und left, und das Positionsattribut verwenden.

Nach links verschieben – Negative Werte für die linke Seite verwenden.

Nach rechts verschieben – links positive Werte verwenden.

Nach oben verschieben – Verwenden Sie den negativen Wert oben.

Nach unten bewegen – positiven Wert für oben verwenden.

Hinweis – Sie können die unteren oder rechten Werte auch auf die gleiche Weise wie die oberen und linken Werte verwenden.

Wie verwende ich CSS zur Positionierung? Vollständige Erklärung des CSS-Layouts und der Positionierung. Wenn Sie mehr über das CSS-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.


Das obige ist der detaillierte Inhalt vonWie verwende ich CSS zur Positionierung? Detaillierte Erläuterung des CSS-Layouts und der Positionierung. 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