Schauen Sie sich zunächst ein Beispiel an:

Struktur:

< /div>

Stil:

*{padding: 0;margin: 0;}

.static{width:300px;height: 300px;}
.relative{margin:50px 50px;width: 200px;height: 200px;position: relative;oben: 50 Pixel; 0;Breite: 100px;Höhe: 100px;}

Rendering:

Zusammenfassung!

Durch Festlegen der vertikalen und horizontalen Position des Elements können Sie:

1. Relative Positionierung: Das Element bewegt sich „relativ“ zu seinem Startpunkt. Das Element auf dem Bild hat sich relativ zum Startpunkt um 50 Pixel nach unten verschoben. Es nimmt den ursprünglichen Platz ein.

2. Absolute Positionierung: Das Element bewegt sich „relativ“ zu seinem übergeordneten Element (oder dem ihm am nächsten positionierten Vorgängerelement). Die Koordinaten der oberen linken Ecke des Elements im Diagramm stimmen mit dem übergeordneten Element überein. Es nimmt keinen Platz ein.

3. Feste Positionierung: Das Element bewegt sich „relativ zum“ Ansichtsfenster. Das Element im Diagramm bewegt sich an die Position der Koordinaten (0,0). Es nimmt keinen Platz ein.