CSS - Positionierung: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(2 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
  
−
== Die Eigenschaften position und float ==
+
== position und display ==
−
 
 
−
In CSS Layouts kann man Elemente absolut oder relativ positionieren (Maße angeben) Außerdem kann man Elemente 'floaten'.
 
−
 
 
  
 +
Wie sich Elemente zueinander oder im Seitenfluss verhalten kann man mit den display und position Eingenschaften steuern.
  
 
Positionierungsarten:
 
Positionierungsarten:
  
−
  position: static;
+
  position: static; -> das normale verhalten.
−
  position: absolute;
+
  position: absolute; -> mit absoluten Koordinaten an Elternelement anpinnen.
−
  position: relative;
+
  position: relative; -> relativ zum Elternelement anpinnen
−
  position: fixed;
+
  position: fixed; -> absolute zum Browserfenster anpinnen
−
 
 
−
Float Eigenschaft:
 
−
 
 
−
float: left;
 
−
float: right;
 
−
float: none;
 
  
 
===Absolute Positionierung===
 
===Absolute Positionierung===
−
* Die Maßangabe bezieht sich auf die obere linke Ecke des Browserfensters
+
* 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 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.
 
* Wenn keine Maßangabe für top,left... verwendet wird bleibt die Box da stehen wo sie ohne positionierung gelandet wäre.
Zeile 26: Zeile 18:
 
===Relative Positionierung===
 
===Relative Positionierung===
 
Hier beziehen sich die Werte auf die 'normale' Position des Elements. Es ist also quasi eine Verschiebung.
 
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
 +
== Flex ==
 +
Siehe [[CSS - Flexbox]]
  
 
=== Float-Elemente ===
 
=== 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.
 
* 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.
 
* Text (oder Bilder) aus dem normalen Textfluss muß um die gefloateten Kästen fließen.
Zeile 39: Zeile 53:
 
width: 570px;
 
width: 570px;
 
padding: 15px;
 
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;
 +
}
 +
#top, #bottom
 +
{
 +
    width: 100%;
 +
    background: yellow;
 +
    display:table-row;
 +
 +
}
 +
#top
 +
{
 +
    height: 50px;
 +
}
 +
#bottom
 +
{
 +
    background: lightgrey;
 +
    height:100%; 
 +
}
 +
Solution #2: Using calc and viewport units
 +
 +
FIDDLE
 +
 +
#top
 +
{
 +
    height: 50px;
 +
    background: yellow;
 +
}
 +
#bottom
 +
{
 +
    background: lightgrey;
 +
    height: calc(100vh - 50px);
 +
}
 +
Solution #3 - Flexbox
 +
 +
FIDDLE
 +
 +
html, body
 +
{
 +
    height: 100%;
 +
}
 +
body
 +
{
 +
    display: flex;
 +
    flex-direction: column;
 +
}
 +
#top
 +
{
 +
    height: 50px;
 +
    background: yellow;
 +
}
 +
#bottom
 +
{
 +
    background: lightgrey;
 +
    flex:1;
 
}
 
}

Aktuelle Version vom 18. Dezember 2019, 08:29 Uhr

position und display[Bearbeiten]

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[Bearbeiten]

  • 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[Bearbeiten]

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

display[Bearbeiten]

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

Flex[Bearbeiten]

Siehe CSS - Flexbox

Float-Elemente[Bearbeiten]

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[Bearbeiten]

  1. box1 {

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

Footer bis zum Seitenende[Bearbeiten]

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;

}

Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=CSS_-_Positionierung&oldid=24193“