Von b_funke |

Positionieren mit CSS

  1. Box-Modell – Jedes HTML-Block-Element
    hat eine Außenabstand (margin) einen Rahmen
    (border) und einen Innenabstand (padding)
    mehr bei:
    https://wiki.selfhtml.org/wiki/CSS/Tutorials/Boxmodell
    Bild entfernt.
  2. display:inline; positioniert alle Elemente
    nebeneinander – ohne Box-Modell
    display:block; positioniert alle Elemente 
    untereinander – mit Box-Modell
    display:inline-block; positioniert nebeneinander
    mit Box-Modell
    display:flex; flexible Anordnung von 
    Elementen nebeneinander
    display:grid; Anordnung von Elementen in einem Raster
    display:none; bringt ein Element zum Verschwinden
  3. float:left; positioniert alle HTML-Elemente neben-
    einander von links nach rechts;
    float:right: positioniert alle HTML-Elemente von 
    rechts nach links;
    clear:left; clear:right; clear:both;
    hebt die Positionierung wieder auf
  4. position:absolute; position:relative; position:fixed; absolute; top left/bottom right 
    rechnet vom linken oberen Rand des Eltern-
    Elements bzw. dem rechten unteren Rand des Eltern-Elements, das Elternment muss selbst absolute oder relaltive positioniert sein
    position:relative; top/left oder bottom/right rechnet von der Stelle aus, an der das Element gerade steht
    position:fixed; top/left oder bottom/right 
    bleibt beim Scrollen stehen