Różnica między pozycjonowaniem statycznym i względnym

Jaka jest różnica między pozycjonowaniem statycznym (domyślnym) a pozycjonowaniem względnym w CSS?

Pozycjonowanie statyczne to domyślny model pozycjonowania elementów. Są wyświetlane na stronie, na której zostały wyrenderowane jako część normalnego przepływu HTML. Statycznie rozmieszczone elementy nie są posłuszni left, top, righti bottomzasady:

Pozycjonowanie względne pozwala na podanie konkretnego offsetu ( left, topetc), który jest w stosunku do normalnego położenia elementu w przepływie HTML. Więc jeśli mam pole tekstowe wewnątrz, divmogę zastosować względne pozycjonowanie w polu tekstowym, aby było wyświetlane w określonym miejscu w stosunku do miejsca, w którym normalnie byłoby umieszczone w div:

Istnieje również pozycjonowanie absolutne - w ramach którego określasz dokładną lokalizację elementu względem całego dokumentu lub następnego elementu pozycjonowanego względnie dalej w górę drzewa elementów :

A kiedy position: relativezostanie zastosowane do elementu nadrzędnego w hierarchii:

Zwróć uwagę, jak nasz element pozycji absolutnej jest ograniczony przez element pozycjonowany względnie.

I wreszcie jest naprawiony. Stałe pozycjonowanie ogranicza element do określonej pozycji w rzutni, która pozostaje na miejscu podczas przewijania:

Możesz również zaobserwować zachowanie, w którym elementy o stałej pozycji nie powodują przewijania, ponieważ nie są uważane za ograniczone przez rzutnię:

Podczas gdy elementy pozycjonowane bezwzględnie są nadal ograniczone przez rzutnię i powodują przewijanie:

.. chyba że twój element nadrzędny używa overflow: ?do określenia zachowania przewijania (jeśli istnieje).

Dzięki pozycjonowaniu bezwzględnemu i ustalonemu pozycjonowaniu elementy są usuwane z przepływu HTML.

Tutaj możesz zobaczyć prosty przegląd: W3School

Ponadto, jeśli dobrze pamiętam, kiedy deklaruję element jako względny, domyślnie pozostanie on w tym samym miejscu, w którym powinien, ale zyskujesz możliwość absolutnego pozycjonowania elementów wewnątrz niego względem tego elementu, co uważam za bardzo przydatne w przeszłości.

W odpowiedzi na pytanie „dlaczego CSS nadal implementowałoby position: static;” w jednym scenariuszu, użycie pozycji: względna dla rodzica i pozycji: bezwzględnej dla dziecka ogranicza szerokość skalowania dziecka. W poziomym systemie menu, w którym możesz mieć „kolumny” linków, użycie opcji „width: auto” nie działa w przypadku względnych rodziców. W takim przypadku zmiana na „statyczną” pozwoli na zmianę szerokości w zależności od zawartości wewnątrz.

Spędziłem kilka godzin zastanawiając się, dlaczego nie mogę dostosować mojego kontenera do ilości zawartej w nim zawartości. Mam nadzieję że to pomoże!

Pozycja względna umożliwia ustawienie pozycji góra / dół / lewo / prawo. Static nie pozwoli ci tego zrobić, chyba że użyjesz parametrów marginesu. Istnieje różnica między górą a górą marginesu.

Nie będziesz musiał używać statycznego, ponieważ jest to ustawienie domyślne

Względne położenie odnosi się do normalnego przepływu. Względne położenie tego elementu (z przesunięciami) odnosi się do położenia, w którym element byłby normalnie, gdyby nie został przesunięty.

Matthew Abbott ma naprawdę dobrą odpowiedź.

Bezwzględne i względne umieszczone elementy posłuszeństwa top, left, rightibottom polecenia (offsetu), gdzie statyczne ustawione pozycje nie.

Względnie pozycjonowane elementy przesuwają przesunięcia z miejsca, w którym normalnie znajdowałyby się w html.

Elementy pozycjonowane bezwzględnie przenoszą przesunięcia z dokumentu lub następnego względnie pozycjonowanego elementu w górę drzewa DOM.

Statyczny: STATIC pozycjonowany element jest tym, co otrzymujemy przez DEFAULT (Normalne pozycjonowanie obiektów).

Względny: Względem aktualnej pozycji, ale można go przenieść. Lub WZGLĘDNIE pozycjonowany element jest umieszczony względem SIEBIE.

statyczne i względne to atrybuty pozycji. relatywne są używane do wielu zastosowań. Nie dla jednego. Pamiętaj jednak, że statyczne i względne nie szkodzą normalnemu przepływowi dokumentów HTML. static to domyślna pozycja, w której piszesz dowolny element w formacie HTML. Jeśli element ma położenie względne, można go ustawić względem swojego miejsca natywnego. jeśli chcesz dopasować element z małych przestrzeni, użyj pozycji względnej, aby nie trzeba było dodawać marginesu, dopełnienia itp., jeśli element ma pozycję względną i ma element podrzędny. Tutaj możemy wykonać pomiary względem jego rodzica. Jeśli dodasz szerokość 10% do dziecka, oznacza to (szerokość + dopełnienie) x10%. Ale nie dodasz względnego słowa kluczowego, otrzymasz szerokość x 10%. Poza tym najważniejszym zastosowaniem krewnego jest; możesz umieścić dowolny element na górze.