# Pozycjonujemy elementy na stronie

Domyślnie elementy na stronie umieszczane są jeden za drugim (z uwzględnieniem wartości właściwości `display`). Czasem jednak zdarza się, że potrzebujemy uzyskać efekt nałożenia jednego elementu na drugi bądź przesunięcia. Na szczęście język CSS jest wyposażony w narzędzia, które nam to umożliwiają. Są to właściwości związane z **pozycjonowaniem**.

Do pozycjonowania służy właściwość `position`, która może przyjmować poniższe wartości:

* `static` – jest to wartość domyślna dla każdego elementu, nie trzeba deklarować jej wprost.
* `relative` – zmienia położenie elementu względem niego samego.
* `absolute` – wyjmuje element z jego pierwotnego położenia i umieszcza go we wskazanym miejscu względem najbliższego kontenera, który ma zdefiniowane `position: relative`.
* `fixed` – umieszcza element na stałej pozycji względem okna przeglądarki (viewport). Dobrym przykładem użycia jest menu na stałe "przyklejone" u góry strony.

Oprócz deklaracji `position` musimy również zadeklarować wartości współrzędnych, dzięki którym możemy precyzyjnie określić położenie naszego elementu: `top`, `bottom`, `right` oraz `left`.

Na prostych przykładach zobaczymy, jak opanować pozycjonowanie w CSS.

```markup
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item item-relative"></div>
  <div class="item"></div>
</div>
```

```css
.item {
  width: 150px;
  height: 150px;
  margin: 5px;
  background: salmon;
}

.item-relative {
  background: lightblue;
  position: relative;
  top: -20px;
  right: 25px;
}
```

Powyżej przykład elementu wypozycjonowamego relatywnie (czyli względem samego siebie).

Pozycjonowanie absolutne wymaga od nas nieco ostrożności, jednak jeśli wiemy, jak działa, nie wpadniemy w żadną pułapkę.

```markup
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item item-absolute"></div>
  <div class="item"></div>
</div>
```

```css
.item {
  width: 150px;
  height: 150px;
  margin: 5px;
  background: salmon;
}

.item-absolute {
  background: lightblue;
  position: absolute;
  top: -20px;
  right: 25px;
}
```

Powyższy element został wyjęty ze swojego miejsca (jak widać, nie pozostawia również po sobie wolnej przestrzeni – cóż za oszczędność!) i umieszczony zupełnie gdzie indziej, w prawym górnym rogu strony.

Jeśli używamy pozycjonowania absolutnego nieostrożnie, nasz element może wylądować w dość niespodziewanym miejscu. Musimy więc pamiętać, że każdy element z `position: absolute` jest pozycjonowany **względem** jakiegoś innego elementu. Takim odniesieniem jest najbliższy element, któremu nadaliśmy `position: relative`. Musimy też pamiętać, że element pozycjonowany absolutnie musi znajdować się **wewnątrz** elementu z `position: relative`.

```markup
<div class="item"></div>

<div class="item item-outer">
  <div class="item item-inner">
</div>

<div class="item"></div>
```

```css
.item {
  width: 100%;
  height: 100px;
  margin: 5px 0;
  background: salmon;
}

/*
  Względem tego elementu będziemy
  pozycjonować inny element.
  Nie jest konieczne podawanie
  współrzędnych `top` itp.
  ponieważ chcemy, aby pozostał
  na swoim miejscu
*/
.item-outer {
  position: relative;
}

/*
  To element, który pozycjomujemy
  względem `.item-outer`
*/
.item-inner {
  width: 50px;
  height: 50px;
  background: lightblue;

  /* Zostanie umieszczony w prawym górnym rogu */
  position: absolute;
  top: 0;
  right: 0;
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/the-awwwesomes-tutorial-www-beginners-6/pozycjonujemy-elementy-na-stronie.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.