Pozycja elementów HTML odgrywa istotną rolę w organizowaniu komponentów strony internetowej. Mówiąc dokładniej, położenie elementów można dostosować, wykorzystując CSS „pozycja" nieruchomość. Ta właściwość może być powiązana z właściwościami przesunięcia, takimi jak właściwości górne, lewe, prawe i dolne, zapewniając określone wartości do dostosowania elementu na stronie. Jednakże "absolutny”Umieszczone elementy można dostosować do najbliższego pozycjonowanego elementu.

Ten post wyjaśni absolutne pozycjonowanie CSS.

Właściwość CSS „pozycja”

„„pozycja„Własność w CSS można wykorzystać do dostosowania pozycji elementu. Różne wartości właściwości pozycji są stałe, bezwzględne, względne, statyczne i lepkie. Wartości te są ustawione z właściwościami przesunięcia, takimi jak górna, prawa, lewa i dolna, do regulacji pozycji elementu.

Jak zastosować absolutne pozycjonowanie CSS?

Absolutne pozycjonowanie elementu można zastosować za pomocą CSS ”pozycja„Własność o wartości”absolutny". Element z położeniem bezwzględnym jest dostosowywana odpowiadająca najbliższemu elementowi nadrzędnemu. Ale jeśli przodek nie zostanie ustawiony, dostosuje się do sekcji ciała dokumentu.

Przykład

Zrozumiemy tę koncepcję z praktycznym przykładem.

Krok 1: Utwórz plik HTML

W pliku HTML, w elemencie ciała, dodaj div z nazwą klasy „główny". Następnie, wewnątrz utworzonego div, dodaj znacznik HTML powiązany z następującymi atrybutami:

• • "src”Zapewnia link do obrazu.
  • "klasa”Jest używany w CSS do stylizacji elementów.
  • "Alt”Atrybut określa tekst pokazujący zamiast obrazu, jeśli obraz nie ładuje się na stronie.
  • "Alt”Atrybut określa tekst wyświetlany na stronie zamiast obrazu, jeśli obraz nie ładuje się na stronie.

Następnie dodaj kolejny Div zawierający nagłówek i elementy H1 i Paragrafa:

Absolutne pozycjonowanie CSS

Witam Linuxhint Team!

W CSS wykorzystywane jest kilka właściwości stylizacji do dekoracji elementów HTML.

Krok 2: Stylowe elementy „wszystkie”

*
Font-Family: Verdana, Genewa, Tahoma, Sans-Serif;

Elementy HTML są stylizowane za pomocą „rodzina czcionek„Własność o wartości”Verdana, Genewa, Tahoma, Sans-Serif". Ta lista wartości zapewnia, że ​​jeśli przeglądarka nie obsługuje pierwszego stylu, druga zostanie zastosowana.

Krok 3: styl „Home” Div

.dom
Pozycja: absolutna;
TOP: 50px;
po lewej: 45px;

Poniżej znajdują się właściwości zastosowane do „dom„Div:

• • "pozycja”Właściwość ustawia pozycję elementu. Tutaj dodano „absolutny”Umieści element względem sekcji ciała HTML.
  • "szczyt„Własność jest wykorzystywana do pionowej regulacji elementu.
  • "lewy„Właściwość jest używana do regulacji poziomej elementu.

Krok 4: styl „treść” div

.treść
kolor tła: kadetblue;
szerokość: 300px;
Wysokość: 250px;
Padding-Left: 40px;
Margin-left: 80px;

Poniżej znajdują się właściwości CSS, które są stosowane do „treść„Div:

• • "kolor tła”Właściwość ustawia kolor tła elementu.
  • "szerokość„Właściwość ustawia szerokość elementu.
  • "wysokość„Właściwość ustawia wysokość elementu.
  • "Padding-Left„Właściwość jest ustawiona na dodanie miejsca po lewej stronie zawartości elementu.
  • "margines lewic„Właściwość określa przestrzeń po lewej stronie elementu.

W tym momencie nasza strona internetowa będzie wyglądać tak:

Z powyższego wyniku widać, że obraz domu DIV jest umieszczony na 50px od góry i 45px od lewej strony ciała dokumentu. Ponadto pozycja domowej div jest ustawiona w stosunku do sekcji ciała HTML.

Jak dostosować pozycję elementu „względnego” do pozycjonowanego elementu nadrzędnego?

W tej sekcji poprowadzi Cię po dostosowaniu pozycji elementu w stosunku do najbliższego elementu nadrzędnego pozycji.

Ustaw „pozycję” właściwości „Content” Div

Pozycja: względny;

Aby dostosować położenie elementu względem elementu nadrzędnego, ustaw „pozycja„Własność elementu nadrzędnego do„względny" wartość.

Ustaw właściwość „pozycji” elementu „IMG”

.dom
Pozycja: absolutna;
TOP: 100px;
po lewej: 220px;

Tutaj:

• • "pozycja„Właściwość z ustawioną wartością jako„absolutny”Będzie ustawiony w stosunku do elementu nadrzędnego (to znaczy pozycja Div treści jest ustawiona z względną wartości).
  • "szczyt„Właściwość jest wykorzystywana do ustawiania pozycji elementu od góry.
  • "lewy„Właściwość jest wykorzystywana do ustawiania pozycji elementu od lewej.

Wyjście

Z wyniku można zobaczyć, że obraz został umieszczony w stosunku do jego rodzicielskiej div i wygląda na odpowiedni.

Wniosek

CSS „pozycja„Właściwość jest wykorzystywana do ustawienia pozycji elementów HTML. Ta właściwość może być wyceniona jako ustalona, ​​względna, absolutna, lepka i statyczna. „„absolutny„Wartość ustawi element odpowiadający jego pobliskim elementowi nadrzędnemu. Ten post wyjaśnił absolutne pozycjonowanie CSS za pomocą praktycznego przykładu.