Die meisten Informationen finden sich auch auf den bekannten Referenz Plattformen. Ich habe mir die Befehle in meinen Worten zusammengefasst und einige für mich hilfreiche Ergänzungen hinzugefügt.

Die Position von HTML Elementen mit CSS steuern

Mit den CSS Eigenschaften kann die Position von HTML Elementen gesteuert werden.

Die Position Eigenschaft

Das position Attribut spezifiziert die art der Positionierung des Elementes. Dafür gibt es vier mögliche Verhaltensweisen: static , relative , fixed , absolute

position: static

Ohne definition werden die HTML Elemente automatisch mit position: static;   positioniert. Die Elemente werden entsprechend dem Fluss der Se

Eigenschaften wie top , bottom , left , und right haben keinen Einfluss auf Elemente die mit static  positioniert sind.

position: relative

Mit position: relative;  kann das HTML Element gegenüber seiner normalen Position verschoben werden. Ohne zusätzliche CSS Eigenschaften verhält sich relative wie static, reagiert aber auf  top , bottom , left , und right .

Die Nachfolgenden Elemente werden nicht beeinflusst.

Typische Verwendung um Elemente einzurücken, oder zur sonstigen Verschiebung gegenüber der ursprünglichen Position.

position: fixed

Wird position: fixed;  verwendet, dann positioniert sich das Element relativ zum viewport (der sichtbaren Browser Fläche). Mit den Eigenschaften top , bottom , left , und right , kann es entsprechend zum rand des Viewports positioniert werden.

Beim Scrollen bewegt sich das Element nicht mit der Seite mit, sondern bleibt im Viewport stehen.

Da das Element nicht am ursprünglichen Platz der Seite steht, nehmen die nachfolgenden Elemente den Platz ein. (Es bleibt kein Leerraum)

Typische Verwendung ist ein „Top“ Butten, der ganz nach oben scrollt.

position: absolute

Soll ein Element nicht dem normalen Fluss der Seite folgen, sondern eine bestimmte Position gegenüber dem übergeordneten Element haben, so verwendet man position: absolute;. (Verhalten ist ähnlich wie fixed  nur innerhalb des Übergeordneten Elementes.)

Das übergeordnete Element muss selbst ein mit einem position  Attribut relative , fixed  oder  absolute  positioniert sein. Sonst positioniert sich das Element im body  und bewegt sich beim scrollen mit der Seite.

Die Eigenschaften top , bottom , left , und right, steuernden Abstand vom Element vom übergeordneten Element. Achtung wenn width  und height  für das Element vorgegeben wird, sind nur zwei der viel Eigenschaften zu definieren.

https://www.w3schools.com/css/css_positioning.asp

Das Display Attribut

 

div{ display: inline; }