Pozycjonowanie bezwzględne

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

W CSS pozycjonowanie bezwzględne pozwala umieścić element dokładnie tam, gdzie chcesz, wewnątrz jego kontenera.

Po ustawieniu position: absolute; element zostaje usunięty z normalnego układu, więc inne elementy zachowują się tak, jakby go tam nie było. Jego pozycja jest określana względem najbliższego przodka z ustawioną pozycją (inną niż static). Jeśli go nie ma, jego pozycja jest określana względem strony.

Oto podstawowa składnia używania pozycjonowania absolutnego:

.parent {
    position: relative; /* Ustaw element nadrzędny jako przodka z określonym pozycjonowaniem */
}

.child {
    position: absolute;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

.parent: Selektor CSS wybierający element nadrzędny. Ustawienie position: relative; umożliwia pozycjonowanie elementów potomnych bezwzględnie.

.child: Selektor CSS wskazujący element, który chcesz pozycjonować bezwzględnie.

position: absolute;: Ta deklaracja ustawia pozycjonowanie elementu jako bezwzględne, usuwając go z normalnego przepływu.

top, right, bottom, left: Te właściwości określają położenie elementu względem jego najbliższego pozycjonowanego elementu nadrzędnego. Możesz używać wartości dodatnich lub ujemnych, podanych w pikselach (px), emach (em), procentach (%) lub innych prawidłowych jednostkach CSS.

Na przykład:

.parent {
    position: relative;
    width: 400px;
}

.child {
    position: absolute;
    top: 50px;
    left: 100px;
    width: 200px;
}

W tym przykładzie element .parent jest ustawiony jako pozycjonowany element nadrzędny za pomocą position: relative;. Element .child jest pozycjonowany absolutnie za pomocą position: absolute;, a jego położenie ustawiono na 50 pikseli od góry i 100 pikseli od lewej strony najbliższego pozycjonowanego elementu nadrzędnego (elementu .parent).

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z nadrzędnym elementem (<div>), który zawiera dwa elementy podrzędne (<div>) o klasach box1 i box2. Twoim zadaniem jest użyć pozycjonowania absolutnego, aby umieścić element box2 wewnątrz elementu parent. Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera element <div> o klasie parent. Ustaw jego właściwość position na relative, aby uczynić go pozycjonowanym elementem nadrzędnym.
Napisz regułę CSS, która wybiera element <div> o klasie box2.
Ustaw właściwość position elementu .box2 na absolute.
Ustaw właściwość top elementu .box2 na 30px, a właściwość right na 20px. Spowoduje to umieszczenie elementu 30 pikseli od góry i 20 pikseli od prawej strony jego pozycjonowanego elementu nadrzędnego (parent).

Spróbuj swoich sił

<html>
<head>
    <title>Absolute Positioning</title>
    <style>
        .parent {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            width: 150px;
            height: 120px;
            background-color: lightgreen;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="box1">Box 1</div>
        <div class="box2">Box 2</div>
    </div>
</body>
</html>