CSS-Positionierung von HTML-Elementen

Statische Positionierung (“static”)

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

Beispiel-Code zum Bild (siehe unten):

#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):

#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):

#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):

#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>