CSS-Positionierung von HTML-Elementen

Donnerstag, 22. März 2012 | nonprint

 

Statische Positionierung ("static")

HTML-Element erscheint im normalen Textfluss - der Reihe nach wie im Quelltext.

Beispiel-Code zum Bild (siehe unten):

<html>
<head>
<style type="text/css">

#DasElement {
 position: static;
 width: 150px;
 height: 150px;
 background: grey;
 color: white;
}

</style>
</head>
<body>

<p>Ich bin ganz normaler Text im normalen Textfluss.</p>

<div id="DasElement">Das Element</div>

</body>
</html>

Absolute Positionierung ("absolute")

HTML-Element ist außerhalb des normalen Textflusses (beeinflusst restliches Layout auch nicht) und wird mit "left", "top", "right" und "bottom" auf der Site positioniert.

Beispiel-Code zum Bild (siehe unten):

<html>
<head>
<style type="text/css">

#DasElement {
 position: absolute;
 top: 40px;
 left: 180px;
 width: 150px;
 height: 150px;
 background: grey;
 color: white;
}

</style>
</head>
<body>

<p>Ich bin ganz normaler Text im normalen Textfluss.</p>

<div id="DasElement">Das Element</div>

</body>
</html>

Relative Positionierung ("relative")

HTML-Element ist innerhalb des normalen Textflusses, kann aber durch "left", "top", "right" und "bottom" innerhalb des übergeordneten HTML-Elementes positioniert werden.

Beispiel-Code zum Bild (siehe unten):

<html>
<head>
<style type="text/css">

#DasElement {
  position: relative;
  top: 40px;
  left: 180px;
  width: 150px;
  height: 150px;
  background: grey;
  color: white;
}


</style>
</head>
<body>

<p>Ich bin ganz normaler Text im normalen Textfluss.</p>

<div id="DasElement">Das Element</div>

</body>
</html>

Fixierte Positionierung ("fixed")

Wie absolute Positionierung, jedoch bleibt das HTML-Element beim Scrollen stehen in der es positioniert wurde.

Beispiel-Code zum Bild (siehe unten):

<html>
<head>
<style type="text/css">

#DasElement {
 position: fixed;
 top: 40px;
 left: 180px;
 width: 150px;
 height: 150px;
 background: grey;
 color: white;
}

</style>
</head>
<body>

<p>Ich bin ganz normaler Text im normalen Textfluss.</p>

<div id="DasElement">Das Element</div>

</body>
</html>

 

Mediengestalter-Portal :: Know-How für Mediengestalter :: gestalterkram.de – css-positionierung-static.jpg

Mediengestalter-Portal :: Know-How für Mediengestalter :: gestalterkram.de – css-positionierung-absolute.jpg

Mediengestalter-Portal :: Know-How für Mediengestalter :: gestalterkram.de – css-positionierung-relative.jpg

Mediengestalter-Portal :: Know-How für Mediengestalter :: gestalterkram.de – css-positionierung-fixed.jpg

 

» Alle Artikel dieser Kategorie

Kommentieren

GESTALTERKRAM.DE BEI FACEBOOK/GOOGLE+

© 2014 Martin Dudkowiak  |  Kontakt  |  Sitemap  |  Impressum