Pozycjonowanie static w CSS3

By /

CSS

W CSS, static jest domyślną wartością właściwości position dla każdego elementu. Elementy z pozycją static są rozmieszczone w normalnym strumieniu dokumentu, co oznacza, że nie można ich pozycjonować za pomocą właściwości top, right, bottom, left oraz nie są wpływane przez właściwość z-index.

Cechy pozycji static:

  • Elementy są rozmieszczone zgodnie z naturalnym porządkiem dokumentu.
  • Nie można ich pozycjonować eksplikacyjnie (np. nie reagują na top, right, bottom, left).
  • Są zawsze rozmieszczone tam, gdzie byłyby, gdyby nie było na nich zastosowane żadne CSS dotyczące pozycji.

Przykład użycia pozycji static:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pozycjonowanie static w CSS3</title>
    <style>
        .container {
            width: 100%;
            border: 2px solid black;
            padding: 10px;
        }
        
        .static-box {
            width: 200px;
            padding: 20px;
            background-color: lightblue;
            border: 1px solid navy;
            /* Pozycja static jest domyślna, więc nie 
               musi być jawnie deklarowana */
        }
        
        .reference-box {
            width: 200px;
            padding: 20px;
            background-color: lightcoral;
            border: 1px solid darkred;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="static-box">Jestem elementem static.</div>
        <div class="reference-box">Jestem elementem odniesienia.</div>
    </div>
</body>
</html>

W tym przykładzie, oba elementy div są w pozycji static, co oznacza, że są rozmieszczone jeden po drugim w naturalnym strumieniu dokumentu. Nie ma potrzeby deklarowania position: static;, ponieważ jest to wartość domyślna.

Podsumowanie:

Pozycja static jest domyślnym sposobem pozycjonowania elementów w CSS i jest używana, gdy nie ma potrzeby zmieniania ich naturalnego położenia w dokumencie. Zrozumienie pozycji static jest fundamentem do nauki bardziej zaawansowanych technik pozycjonowania, takich jak relative, absolute, fixed czy sticky. Pozycja static jest często używana bez konieczności jawnego jej deklarowania, ponieważ jest domyślnym ustawieniem dla elementów HTML.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDevelopera w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

 

Powiązane artykuły

Scroll to Top