CSS - Positionierung

position und display

Wie sich Elemente zueinander oder im Seitenfluss verhalten kann man mit den display und position Eingenschaften steuern.

Positionierungsarten:

position: static; -> das normale verhalten.
position: absolute; -> mit absoluten Koordinaten an Elternelement anpinnen.
position: relative; -> relativ zum Elternelement anpinnen 
position: fixed; -> absolute zum Browserfenster anpinnen

Absolute Positionierung

• Die Maßangabe bezieht sich auf die obere linke Ecke des Browserfensters oder an das nächste Elternelement wenn das absolut oder relativ positioniert ist.
• Wenn ein Elternelement ebenfalls relativ oder absolut positioniert ist bezieht sich die Maßangabe auf das Elternelement
• Wenn keine Maßangabe für top,left... verwendet wird bleibt die Box da stehen wo sie ohne positionierung gelandet wäre.

Relative Positionierung

Hier beziehen sich die Werte auf die 'normale' Position des Elements. Es ist also quasi eine Verschiebung.

display

Die Positionierung kann man eher als Positionierung auf der Seite oder in einem Elterncontainer sehen. Display kümmert sich eher auf den Fluss von Elementen. Jedes Element hat von Haus aus eine display-Eigenschaft. Diese kann man aber verändern.

display: block; // Standardverhalten von div, p oder h Elementen. Nimmt ganze Zeile ein.
display: inline; // Standardverhalten von b oder a Elementen. Nimmt Platz wie benötigt ein.
display: inline-block // Ist im Textfluss, hat aber auch block-Eigenschaften.
display: flex; // Flex Container (siehe CSS - Flexbox)
display: float; // Floated links oder rechts ist aus dem normalen Textfluss genommen. 
display: grid; // für komplexe Seitenlayouts

Float-Elemente

Werden nicht mehr häufig benötigt, nachdem es flex gibt. Für Textumflossene Elemente evtl. praktisch.

Float Eigenschaft:

float: left;
float: right;
float: none;

Dazu gehört noch clear um nach gefloateten Elementen den normalen Textfluss wieder herzustellen.

• Ein gefloatetes Element wird aus dem Textfluss gehoben und rutscht nach links (float:left;) oder rechts-oben (float:right;) Bis es an das nächste Float-Element stößt.
• Text (oder Bilder) aus dem normalen Textfluss muß um die gefloateten Kästen fließen.
• floatende Elemente müssen immer eine Breite haben

Beispiele

1. box1 {

position: absolute; top: 70px; left: 80px; width: 570px; padding: 15px; }

Footer bis zum Seitenende

http://stackoverflow.com/questions/22934016/extend-div-to-bottom-of-page-only-html-and-css

Solution: #1: css tables:

FIDDLE

html,body {

   height:100%;
   width:100%;

} body {

   display:table;

}

1. top, #bottom

{

   width: 100%;
   background: yellow;
   display:table-row;

}

1. top

{

   height: 50px;

}

1. bottom

{

   background: lightgrey;
   height:100%;  

} Solution #2: Using calc and viewport units

FIDDLE

1. top

{

   height: 50px;
   background: yellow;

}

1. bottom

{

   background: lightgrey;
   height: calc(100vh - 50px);

} Solution #3 - Flexbox

FIDDLE

html, body {

   height: 100%;

} body {

   display: flex;
   flex-direction: column;

}

1. top

{

   height: 50px;
   background: yellow;

}

1. bottom

{

   background: lightgrey;
   flex:1;

}