CSS
Pozycjonowanie

Składnia

• pozycja: statyczny | bezwzględny | ustalony | względny | lepki | początkowy | dziedziczenie | wyłączony;
• indeks z: auto | liczba | początkowy | odziedziczony;

Parametry

Uwagi

Naprawiono pozycję

Zdefiniowanie pozycji jako stałej możemy usunąć element z obiegu dokumentów i ustawić jego pozycję względem okna przeglądarki. Jednym z oczywistych zastosowań jest to, że gdy chcemy, aby coś było widoczne, gdy przewijamy do dołu długiej strony.

#stickyDiv {
    position:fixed;
    top:10px;
    left:10px;
}

Nakładające się elementy z indeksem Z.

Aby zmienić domyślne elementy pozycjonowane w stosie (właściwość position ustawiona na relative , absolute lub fixed ), użyj właściwości z-index .

Im wyższy wskaźnik Z, tym wyżej w kontekście stosu (na osi Z) jest umieszczony.

Przykład

W poniższym przykładzie wartość indeksu Z wynosząca 3 oznacza kolor zielony na górze, wartość indeksu Z wynosząca 2 powoduje umieszczenie pod nim koloru czerwonego, a wartość indeksu Z równa 1 oznacza niebieski.

HTML

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

CSS

div {
    position: absolute;
    height: 200px;
    width: 200px;
}
div#div1 {
    z-index: 1;
    left: 0px;
    top: 0px;
    background-color: blue;
}
div#div2 {
    z-index: 3;
    left: 100px;
    top: 100px;
    background-color: green;
}
div#div3 {
    z-index: 2;
    left: 50px;
    top: 150px;
    background-color: red;
}

Tworzy to następujący efekt:

Zobacz działający przykład na JSFiddle .

Składnia

z-index: [ number ] | auto;

Uwagi

Wszystkie elementy są ułożone w osi 3D w CSS, łącznie z osią głębokości, mierzoną właściwością z-index . z-index działa tylko na pozycjonowanych elementach: (patrz: Dlaczego Z-index potrzebuje określonej pozycji do działania? ). Jedyną wartością, w której jest ignorowana, jest wartość domyślna, static .

Przeczytaj o właściwości z-index i kontekstach stosu w specyfikacji CSS na prezentacji warstwowej oraz w Mozilla Developer Network .

Względne położenie

Pozycjonowanie względne przesuwa element w stosunku do miejsca, w którym byłby w normalnym przepływie. Właściwości offsetu:

1. Top
2. lewo
3. dobrze
4. Dolny

służą do wskazania, jak daleko należy przesunąć element z miejsca, w którym byłby w normalnym przepływie.

.relpos{
    position:relative;
    top:20px;
    left:30px;
}

Ten kod przeniesie pole zawierające element z atrybutem class = "relpos" o 20 pikseli w dół i 30 pikseli w prawo od miejsca, w którym byłby w normalnym przepływie.

Pozycja absolutna

Gdy używane jest pozycjonowanie bezwzględne, pole żądanego elementu jest usuwane z normalnego przepływu i nie wpływa już na pozycję innych elementów na stronie. Właściwości przesunięcia:

1. Top
2. lewo
3. dobrze
4. Dolny

określ, że element powinien pojawić się w stosunku do następnego elementu zawierającego elementy niestatyczne.

.abspos{
    position:absolute;
    top:0px;
    left:500px;
}    

Ten kod przeniesie pole zawierające element z atrybutem class="abspos" dół o 0px i w prawo o 500px w stosunku do jego zawierającego elementu.

Pozycjonowanie statyczne

Domyślna pozycja elementu jest static . Aby zacytować MDN :

To słowo kluczowe pozwala elementowi na normalne zachowanie, tzn. Że jest ułożony w bieżącej pozycji w przepływie. Właściwości: górny, prawy, dolny, lewy i Z-index nie mają zastosowania.

.element{
  position:static;
}