Podstawy pozycjonowania

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 55 z 76.

W CSS pozycjonowanie to zestaw właściwości, które pozwalają kontrolować położenie elementów na stronie internetowej. Domyślnie elementy są pozycjonowane zgodnie z normalnym przepływem dokumentu HTML. Jednak dzięki pozycjonowaniu CSS możesz wyjąć elementy z normalnego przepływu i umieścić je w określonych miejscach względem elementu zawierającego lub obszaru widoku (widocznego obszaru okna przeglądarki).

Właściwość position może przyjmować kilka wartości, z których każda zachowuje się inaczej:

static: To wartość domyślna. Element jest pozycjonowany zgodnie z normalnym przepływem dokumentu. Właściwości top, right, bottom i left nie mają żadnego wpływu.

relative: Element jest pozycjonowany względem swojej normalnej pozycji. Ustawienie właściwości top, right, bottom i left przesunie element względem jego normalnej pozycji, ale nadal będzie on zajmował miejsce w normalnym przepływie.

absolute: Element zostaje usunięty ze zwykłego przepływu i pozycjonowany względem najbliższego pozycjonowanego przodka (przodka, którego wartość position jest inna niż static). Jeśli nie zostanie znaleziony żaden pozycjonowany przodek, element jest pozycjonowany względem początkowego bloku zawierającego (zwykle obszaru widoku).

fixed: Element zostaje usunięty z normalnego przepływu i pozycjonowany względem obszaru widoku. Pozostaje na stałym miejscu, nawet gdy strona jest przewijana.

Oto podstawowa składnia użycia właściwości position:

selector {
    position: value;
}

value: Żądany sposób pozycjonowania (np. static, relative, absolute, fixed, sticky).

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z elementem nadrzędnym (<div>), który zawiera jeden element podrzędny (<div>). Twoim zadaniem jest użycie właściwości position, aby zmienić kontekst pozycjonowania elementów. Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera element <div> z klasą container. Ustaw jego właściwość position na relative. Dzięki temu stanie się pozycjonowanym elementem nadrzędnym dla swoich elementów podrzędnych.
Napisz regułę CSS, która wybiera element <div> z klasą box. Ustaw jego właściwość position na absolute. Dzięki temu element zostanie wyjęty z normalnego przepływu i będzie można ustawić jego pozycję względem najbliższego pozycjonowanego elementu nadrzędnego (container).
Ustaw właściwość top elementu .box na 50px, a właściwość left na 100px. Spowoduje to umieszczenie elementu 50 pikseli od góry i 100 pikseli od lewej strony jego pozycjonowanego elementu nadrzędnego (container).

Spróbuj swoich sił

<html>
<head>
    <title>Positioning Basics</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>