Różnica między pozycjonowaniem statycznym i względnym
W CSS, jaka jest różnica między pozycjonowaniem statycznym (domyślnym) a pozycjonowaniem względnym?
7 answers
Pozycjonowanie statyczne jest domyślnym modelem pozycjonowania elementów. Są one wyświetlane na stronie, gdzie renderowane jako część normalnego przepływu HTML. Statycznie ustawione elementy nie spełniają left, top, right i bottom Zasady:
Pozycjonowanie względne pozwala określić konkretne przesunięcie (left, top etc), która jest względna do normalnej pozycji elementu w HTML flow. Więc jeśli mam pole tekstowe wewnątrz div mogę zastosować względne pozycjonowanie na polu tekstowym aby wyświetlać go w określonym miejscu w stosunku do miejsca, w którym normalnie byłby umieszczony w div:
Istnieje również pozycjonowanie bezwzględne - dzięki któremu można określić dokładną lokalizację elementu względem całego dokumentu, lub następnego względnie pozycjonowanego elementu dalej w górę drzewa elementów :
I gdy position: relative jest stosowane do elementu nadrzędnego w hierarchii:
Zauważ jak nasze element bezwzględnie pozycyjny jest związany elementem względnie pozycyjnym.
I na koniec jest stałe. W przeciwieństwie do innych elementów, które nie są widoczne w widoku, element nie może być ustawiony w pozycji pionowej.]}
Można również zaobserwować zachowanie, że elementy o stałej pozycji nie powodują przewijania, ponieważ nie są uważane za związane przez Widok:
Podczas gdy elementy absolutnie pozycjonowane są nadal związane przez viewport i spowoduje przewijanie:
..chyba, że element nadrzędny użyje overflow: ? do określenia zachowania przewijania (jeśli istnieje).
Przy absolutnym pozycjonowaniu i stałym pozycjonowaniu elementy są wyjmowane z HTML flow.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-16 10:15:43
Możesz zobaczyć prosty przegląd tutaj: W3School
Również, jeśli dobrze pamiętam, deklarując element relatywny, domyślnie pozostanie on w tym samym miejscu, co w przeciwnym razie powinien, ale zyskujesz możliwość absolutnego pozycjonowania elementów wewnątrz niego w stosunku do tego elementu, co uznałem za bardzo przydatne w przeszłości.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-14 12:12:28
Position relative pozwala na użycie top/bottom/left/right do pozycjonowania. Static nie pozwoli Ci na to, jeśli nie użyjesz parametrów marginesu. Jest różnica między Top i margin-top.
Nie musisz używać statycznego, ponieważ jest to domyślne
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-16 00:43:49
W odpowiedzi na "Dlaczego CSS nadal implementowałby position: static;" w jednej scenerii, użycie position: relative dla rodzica i position: absolute dla dziecka ogranicza szerokość skalowania dziecka. W poziomym systemie menu, gdzie możesz mieć 'kolumny' linków, użycie 'width: auto' nie działa z relatywnymi rodzicami. W tym przypadku zmiana na' static ' pozwoli na zmianę szerokości w zależności od zawartości wewnątrz.
Spędziłem kilka dobrych godzin zastanawiając się, dlaczego nie mogę dostać mój pojemnik, aby dostosować się do ilości zawartości w nim. Mam nadzieję, że to pomoże!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-14 14:24:09
Pozycja względna jest względna do normalnego przepływu. Względna pozycja tego elementu (z przesunięciem) jest względna względem pozycji, w której element ten byłby normalnie, gdyby nie został przesunięty.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-28 10:06:33
Matthew Abbott ma naprawdę dobrą odpowiedź.
Pozycje bezwzględne i względne top, left, right oraz bottom poleceń (offsetów), w których pozycje statyczne nie
Względnie pozycjonowane elementy przenoszą przesunięcia z miejsca, w którym normalnie byłyby w html.
Pozycje bezwzględne przenoszą przesunięcia z dokumentu lub następnego względnie położonego elementu w górę drzewa DOM.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:09:39
Static: statyczny element pozycjonowany jest tym, co otrzymujemy domyślnie (normalne pozycjonowanie obiektów).
Relative: Relative do aktualnej pozycji, ale może być przesunięty. Lub względny element pozycjonowany jest względem siebie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-25 16:55:00