Kolejność elementów CSS

Kolejność elementów w CSS jest kluczowym zagadnieniem dla tworzenia dobrze zaprojektowanych i responsywnych stron internetowych. Kolejność elementów, nazywana także kolejnością stosu, decyduje o tym, które elementy są widoczne na wierzchu, gdy się nakładają, oraz jakie jest ich rozmieszczane względem siebie. W tym artykule omówimy podstawowe pojęcia związane z kolejnością elementów w CSS, w tym zrozumienie właściwości z-index, kontekstu układania, a także kolejności dokumentu.

Zrozumienie domyślnej kolejności elementów

Domyślnie, elementy HTML są renderowane w kolejności, w jakiej występują w dokumencie. To oznacza, że elementy znajdujące się później w kodzie HTML wyświetlą się na wierzchu elementów znajdujących się wcześniej.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kolejność Elementów</title>
    <style>
        .container { 
            position: relative;
            height: 200px;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0px;
            left: 50px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            top: 50px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
         <div class="box1"></div>
         <div class="box2"></div>
    </div>
</body>
</html>

W powyższym przykładzie niebieski kwadrat (.box2) wyświetli się na wierzchu czerwonego kwadratu (.box1), ponieważ pojawia się później w dokumencie HTML.

Użycie właściwości `z-index`

Właściwość z-index pozwala kontrolować kolejność nakładania się elementów. Działa tylko na elementy, które mają ustawioną wartość position inną niż static (czyli relative, absolute, fixed lub sticky).

selektor { z-index: wartość; }

Element, któremu przyporządkujemy wyższy indeks przykryje ten z mniejszym.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kolejność Elementów z `z-index`</title>
    <style>
        .container { 
            position: relative;
            height: 200px;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0px;
            left: 50px;
            z-index: 10;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            top: 50px;
            left: 100px;
            z-index: 5;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    >/div>
</body>
</html>

W tym przypadku czerwony kwadrat (.box1) będzie wyświetlany na wierzchu niebieskiego kwadratu (.box2), mimo że pojawia się wcześniej w dokumencie HTML, ponieważ ma wyższy z-index.

Kontekst układania

Każdy element, który ma pozycjonowanie inne niż static (czyli relative, absolute, fixed lub sticky) oraz ustawioną wartość z-index staje się kontekstem układania dla swoich dzieci. Oznacza to, że dzieci tych elementów są układane względem siebie i nie mogą być umieszczone nad elementami spoza tego kontekstu, chyba że kontekst nadrzędny ma odpowiedni z-index.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kontekst Układania</title>
    <style>
        .container {
            position: relative;
            z-index: 10;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0px;
            left: 50px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            top: 50px;
            left: 100px;
            z-index: 20;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

W tym przykładzie, niebieski kwadrat (.box2) będzie wyświetlany na wierzchu czerwonego kwadratu (.box1), ponieważ ma wyższy z-index. Jednak oba te elementy będą zawsze na wierzchu innych elementów spoza .container, które nie mają ustawionego z-index lub mają niższy z-index na poziomie kontekstu.

Kolejność dokumentu i Flexbox/Grid

CSS Flexbox i Grid Layout wprowadzają dodatkowe możliwości kontrolowania kolejności elementów za pomocą właściwości order (dla Flexbox) i grid-row oraz grid-column (dla Grid).

Przykład z Flexbox

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kolejność Flexbox</title>
    <style>
        .container {
            display: flex;
        }

        .item1 {
            order: 2;
            background-color: red;
        }

        .item2 {
            order: 1;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
    </div>
</body>
</html>

Item 1

Item 2

W tym przykładzie, mimo że item1 pojawia się przed item2 w HTML, będzie wyświetlany po item2 dzięki właściwości order.

Przykład z Grid

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kolejność Grid</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .item1 {
            grid-column: 2;
            background-color: red;
        }

        .item2 {
            grid-column: 1;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
    </div>
</body>
</html>

Item 1

Item 2

W tym przypadku, item1 będzie wyświetlany w drugiej kolumnie, a item2 w pierwszej, mimo że item1 pojawia się przed item2 w HTML.