Startseite Skripte für das Wintersemester 2018/19 Webdesign Positionieren, Media Queries, CSS-Variablen Position: Absolute (Browserfenster)


Position: Absolute (Browserfenster)

Positioniert man ein Objekt absolute und definiert sonst nichts weiter, bezieht sich dieses Positionieren auf das Browserfenster!

Online-Demo

Demo – verändert die Browser-Fenstergröße und seht, wie der Stern an der oberen, rechten Ecke des Browsers klebt!

HTML

<section class="container">
    <img class="stern" src="stern.svg" alt="stern">
</section>

CSS

.container {
    width: 80%;
    margin: 12% auto;
    background: #ddd;
    height: 150px;
}

.stern {
    width: 8em;
    /* nächsten 3 Zeilen positionieren den Stern */
    position: absolute;
    right: 8px;
    top: 23px;
}