Różnica między pozycją CSS „względną” a „absolutnym”

W CSS „pozycja„Właściwość jest wykorzystywana do ustawienia pozycji elementu, w której elementy HTML powinny być wyświetlane na stronie internetowej. Ta właściwość jest związana z właściwościami lewej, prawej, górnej i dolnej, aby ustawić ostateczną lokalizację elementu HTML.

Ten blog omówi:

• Co to jest CSS ”pozycja„Typy?
• Jak używać CSS ”Pozycja: względny" Nieruchomość?
• Jak używać CSS ”Pozycja: absolutna" Nieruchomość?

Jakie są typy „pozycji” CSS?

Istnieje pięć rodzajów pozycji CSS:

• "statyczny”: Statycznie ustawione elementy nie mają wpływu właściwości przesunięcia dolne, lewe, prawe i górne. Jest to domyślna wartość elementu HTML.
• "naprawił”: Stały element ustawiony pozostaje w tym samym miejscu, w którym jest ustawiony nawet na przewijaniu ekranu.
• "lepki”: Lepki element ustawiony w stanie pozostanie statyczny, gdy użytkownik przewinie ekran.
• "absolutny”: Element bezwzględny jest ustawiony lub umieszczony w stosunku do najbliższego lub najbliższego elementu przodka HTML.
• "względny”: Element względny jest umieszczony w stosunku do jego normalnej pozycji.

Teraz, przed omówieniem różnicy między elementem względnym i bezwzględnym, utworzymy stronę internetową dla demonstracji.

Warunek wstępny

W HTML najpierw dodaj element div z nazwą atrybutu klasowego „Div-rodziciel". Wewnątrz, dołącz cztery kolejne tagi o nazwie klasy „Div-1". Zauważ, że tylko druga będzie miała dwie klasy, „Div-1" I "pozycjonowanie".

Html

Zastosujmy styl CSS do elementów wymienionych w powyższym bloku kodu HTML.

Styl „Div-rodziciel” div

.Div-rodziciel
margines: 100px;
Pozycja: względny;

Element div o nazwie klasy „Div-rodziciel”Jest stylizowany z właściwościami CSS, które wyjaśniono poniżej:

• "margines„Własność jest wykorzystywana do ustawienia przestrzeni u góry elementu DIV.
• "pozycja„Własność jest ustalona jako„względny”, Który pozycjonuje lub umieszcza wybrany element w stosunku do jego normalnej pozycji.

Styl „div-1” div

.div-1
kolor tła: blueviolet;
szerokość: 200px;
Wysokość: 200px;
granica: 5px przerywany #000000;
Wyświetlacz: Block Inline;

Oto wyjaśnienie stosowanych nieruchomości:

• "kolor tła”Właściwość ustawia kolor tła elementu DIV.
• "szerokość”Właściwość określa szerokość dodanego elementu HTML.
• "wysokość”Wartość właściwości reprezentuje wysokość elementu HTML.
• "granica„Własność stosuje granicę wokół elementu. Jest to określone przy użyciu wartości szerokości, stylu i koloru.
• "wyświetlacz”Z wartością„Block wbudowany„Własność pozwala na zastosowanie szerokości i wysokości do elementu.

Jak używać „Pozycja: względna” w CSS?

Kiedy ustawiasz „pozycja„Wartość właściwości jako„względny”, Porusza się w stosunku do swojej normalnej pozycji. Jego pozycja zależy również od wartości jako właściwości bocznych. Jednak inne elementy nie zostaną zmienione w celu wypełnienia luki pozostawionej przez element.

Styl „pozycjonowanie” div

.Pozycjonowanie
kolor tła: czekolada;
Pozycja: względny;
TOP: 20px;
Po lewej: 20px;

Tutaj:

• "pozycja„Wartość właściwości jest ustalana jako„względny”, Który pozycjonuje element względem jego normalnej pozycji. Następnie jest sparowany z górną, prawą, lewą i dolną właściwościami, aby ustawić końcową lokalizację.
• "szczyt„Własność o wartości”20px”Ustawia przestrzeń 20px nad elementem.
• "lewy„Własność o wartości”20px”Zapewnia przestrzeń 20px po lewej stronie elementu.

Poniższy wynik wyraźnie pokazuje, że pozycja drugiego pudełka jest przenoszona z góry i lewej:

Jak używać „Pozycja: absolut” w CSS?

„„pozycja„Własność o wartości”absolutny”Zmienia pozycję elementu w stosunku do jego pozycjonowanego rodzica Div. Jeśli pozycja elementu nadrzędnego nie jest ustawiona względna, Div porusza się w stosunku do ciała strony internetowej. Ponadto inne elementy wypełnią przestrzeń pozostawioną przez element.

Zmieńmy „pozycja„Własność Div z klasą o nazwie„pozycjonowanie”Od względów do absolutnych i zobacz różnicę:

Pozycja: absolutna;

Drugie pole jest ustawione na przestrzeń 20px od góry i 20px przestrzeni od lewej w stosunku do jego elementu nadrzędnego:

Chodziło o pozycję względną i bezwzględną w CSS.

Wniosek

W CSS, aby zdefiniować ostateczną lokalizację elementu, właściwość pozycji jest wykorzystywana. Mówiąc dokładniej, „względny„Pozycja umieszcza pozycję elementu w stosunku do jego normalnej pozycji, podczas gdy„absolutny”Pozycja umieszcza element w stosunku do jego pozycjonowanego macierzystego elementu HTML. Ten blog omówił różnicę między pozycjami względnymi i bezwzględnymi CSS.