Position: Absolute
Absolutes Positionieren ist der radikalste Eingriff, den Ihr via CSS in einem HTML-Dokument machen könnt! Die Elemente werden komplett aus ihrem „natürlichen Kontext" genommen.
Absolut positionierte Elemente verhalten sich in etwa so wie Ebenen in Photoshop: Sie haben nichts mehr mit den darunter liegenden Ebenen zu tun.
Online-Demo
Demo – verändert mal die Browser-Größe und beobachtet, wie sich „Box 2“ über „Box 1“ legt …
HTML
<section class="container">
<figure class="box-1">Box 1</figure>
<figure class="box-2">Box 2</figure>
<figure class="box-3">Box 3</figure>
<figure class="box-4">Box 4</figure>
</section>CSS
.container {
width: 80%;
margin: 5% auto;
background: #7a7a7a;
height: 400px;
/*
ganz wichtig, sonst beziehen sich die
Positionsangaben auf das Browserfenster!
*/
position: relative;
}
figure {
background: rgba(51, 102, 153, 0.8);
border: 1px solid white;
height: 70px;
width: 200px;
padding: 10px;
color: white;
}
.box-1 {
/* Bezug zur linken, oberen Kante von ".container" */
position: absolute;
left: 30%;
top: 86px;
}
.box-2 {
/* Bezug zur rechten, oberen Kante von ".container" */
position: absolute;
right: 20px;
top: 40px;
}
.box-3 {
/* Bezug zur rechten, unteren Kante von ".container" */
position: absolute;
right: 0px;
bottom: 0px;
}
.box-4 {
/* Bezug zur linken, unteren Kante von ".container" */
position: absolute;
left: 0px;
bottom: 0px;
}