Pozycja relatywna {position: relative}
W jaki sposób przesunąć dowolny element strony o podaną odległość?
selektor { position: relative; parametry }Natomiast jako "parametry" należy podać:
left: wartość- odległość od lewej krawędzi położenia spoczynkowegotop: wartość- odległość od górnej krawędzi położenia spoczynkowegoright: wartość- odległość od prawej krawędzi położenia spoczynkowegobottom: wartość- odległość od dolnej krawędzi położenia spoczynkowego
Można oczywiście łączyć parametry, np. left: 1cm; top: -10px. Należy jednak pamiętać o tym, że parametr left ma pierwszeństwo przed right (jeśli kierunek tekstu jest "ltr" - od lewej do prawej), natomiast top ma pierwszeństwo przed bottom. To znaczy jeśli np. podamy: left: 1cm; top: 2cm; right: 3cm; bottom: 4cm, to wartości right oraz bottom zostaną zignorowane.
Polecenie pozycjonowania relatywnego (względnego) pozwala przesunąć wybrany element w dowolną stronę względem jego położenia spoczynkowego, czyli pozycji gdy nie używamy żadnego pozycjonowania.
Jeśli w miejscu gdzie ma być umieszczony pozycjonowany element, znajdowało się wcześniej coś innego (tekst, grafika itp.), będzie to przykryte przez ten element. Należy przy tym pamiętać, że często ustawienie elementów strony zależy od rozdzielczości ekranu i rozmiarów okna przeglądarki!
Przykład {position: relative}
Szary prostokąt poniżej, który jest częściowo przykryty, przedstawia położenie spoczynkowe obrazka, poddanego pozycjonowaniu: position: relative; left: 50px; top: 45px. Dlatego obrazek ten jest oddalony od lewej krawędzi swojego położenia spoczynkowego o 50px (pikseli), a od górnej o 45px.
Przykład pozycjonowania tekstu:
To jest tekst powiększonyTo jest pozycjonowane pogrubienie tekstu
Pozycjonowanie tabel:
| komórka1 | komórka2 |
| komórka3 | komórka4 |
| komórka1 | komórka2 |
| komórka3 | komórka4 |
| komórka1 | komórka2 |
| komórka3 | komórka4 |
Pozycjonowanie odsyłaczy (możesz je klikać):
Pozycjonowanie relatywnePozycjonowanie absolutne
Nakładanie
Pytania i odpowiedzi {position: relative}
Jak ustawić pozycję w CSS?
Co to jest "position" w CSS?
position w CSS to właściwość, która określa sposób pozycjonowania elementu na stronie. Ta właściwość ma kilka możliwych wartości, które kontrolują zachowanie pozycji elementu względem innych elementów na stronie.
Co to jest "position: relative"?
"position: relative" w CSS oznacza, że element pozostaje w swojej pierwotnej przestrzeni na stronie, ale jego pozycję można dostosować za pomocą właściwości top, right, bottom lub left. To umożliwia przesunięcie elementu względem jego pierwotnej pozycji.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | Poziom wsparcia min. 2,5 roku | |
|---|---|---|---|---|---|---|
position: relative | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 15 2013-07-02 | 1 2003-06-23 |
Komentarze
z3c43r20.03.2022 18:45
Dzięki :lol:
Zobacz więcej
Sławomir Kokłowski08.05.2021 23:45
To pytanie raczej nie ma wiele związku z pozycjonowaniem CSS ;-) W związku z tym proponuję go zadać we właściwym dziale na forum.
Zobacz więcej- Gość
08.05.2021 21:43
Mogę mieć jeszcze jedno pytanie? Skąd wziąć rysunek tej wtyczki facebooka i jak dodać, żeby na stronie uaktualniało się ile osób lubi profil?
Zobacz więcej - Gość
03.05.2021 18:49
Dziękuję bardzo :) Udało mi się wszystko zrobić
Zobacz więcej - Sławomir Kokłowski
27.04.2021 17:43
Jeżeli menu z linkami ma być ponad, a nie po lewej stronie treści - tak jak to było w oryginale w tym szablonie - to w arkuszu stylów trzeba usunąć styl "float: left" dla elementów #MENU i #TRESC.
Zobacz więcej - Gość
27.04.2021 17:19
Dziękuję bardzo. Działa :D Jak fajnie, że są ludzie, którzy bezinteresownie pomagają. Jeszcze mam ostatnie pytanie. Jak zrobić, żeby w zakładce kontakt dane teleadresowe były po środku? Center nic nie daje.
Zobacz więcej - Sławomir Kokłowski
26.04.2021 20:48
Nie jestem pewny, o które zdjęcia "przy tabelce, a nie nad nią" chodzi. Ale zakładam, że miało być coś takiego: [...] Natomiast jeśli zdjęcia mają być z prawej strony jedno pod drugim, można to zrobić np. tak...
Zobacz więcej - Gość
26.04.2021 20:34
Nie chciałam kryptoreklamy tu robić ze stroną firmową, ale jak można adres wstawić:
www.niemieckiewiertla.pl
To chodzi o te zdjęcia przy tabelce, a nie nad nią
Zobacz więcej - Sławomir Kokłowski
25.04.2021 17:56
Podaj link do strony. Być może wtedy ktoś będzie w stanie Ci pomóc.
@amongs: Spróbuj ująć widżet social medów w dodatkowy element <div style="float: right">...</div>. Dopilnuj przy tym, aby znajdował się on na samym początku stopki albo ewentualnie bezpośrednio przed nią...
Zobacz więcej - Gość
25.04.2021 16:59
A co z moją tabelką? Post z 21.04. Pomoże ktoś?
Zobacz więcej
