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>