Podczas opracowywania dowolnej aplikacji pozycja komponentów musi być odpowiednia dla lepszego układu. Na przykład pasek nawigacyjny jest głównie ustawiony na górze aplikacji, a informacje boczne są ustawione po dowolnej stronie dokumentu, głównie u góry, lewej lub prawej strony. Mówiąc dokładniej, CSS pozwala na korzystanie z „pozycja„Własność o wartości”naprawił„Aby ustawić ikony nawigacji, aby pozostać w tej samej pozycji w aplikacji podczas przewijania.

Ten blog omówi:

• Co to jest CSS ”pozycja" Nieruchomość?
• Jak utworzyć stały element pozycji za pomocą CSS?

Co to jest właściwość CSS „pozycja”?

CSS „pozycja„Właściwość jest wykorzystywana do ustawienia pozycji elementu w aplikacji. Różne wartości związane z właściwością pozycji CSS to „statyczny”,„absolutny”,„względny”,„naprawił", I "lepki".

Te wartości właściwości można ustawić za pomocą innych właściwości przesunięcia, takich jak „szczyt”,„lewy”,„spód", I "Prawidłowy”W CM, PX i nie tylko. Te przesunięcia dostosowują pozycję elementów na stronie.

Jak utworzyć stały element pozycji za pomocą CSS?

W HTML dodaj element DIV z klasą „główny". Wewnątrz elementu DIV umieść element powiązany z następującymi atrybutami:

• "src”Służy do określenia linku obrazu.
• "klasa”Atrybut dostęp do obrazu w CSS lub JavaScript za pomocą określonej nazwy.
• "Alt„Atrybut służy do określenia alternatywnego tekstu, który wyświetli się, jeśli obraz nie załaduje się na stronie.

Następnie element DIV o nazwie klasy „treść”Dodaje się, że zawiera

I

Elementy odpowiednio dla nagłówka i akapitu:

Ustalone pozycjonowanie CSS

Witam Linuxhint Team!

Przejdźmy do sekcji CSS, aby ozdobić wspomniane elementy HTML.

Styl „wszystkie” elementy

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

Gwiazdka „ * „Symbol jest wykorzystywany do wyboru wszystkich elementów. Wszystkie elementy w HTML są stosowane z „rodzina czcionek„Właściwość z ustawioną wartością jako„Verdana, Genewa, Tahoma, Sans-Serif". Ta lista stylów jest podana, aby upewnić się, że jeśli przeglądarka nie obsługuje pierwszej wartości, inne zostaną zastosowane.

Styl „dom” div

.dom
Pozycja: Naprawiono;
TOP: 35px;
po lewej: 16px;

Właściwości zastosowane do elementu DIV „dom”Opisano poniżej:

• "pozycja”Jest określony w celu określenia pozycji elementu. Wartość "naprawił”Ustaw pozycję elementu ustaloną na określonym miejscu.
• "szczyt”Jest właściwością dostosowania pozycji elementu od góry.
• "lewy„Właściwość jest wykorzystywana do dostosowania pozycji elementu od lewej.

Styl „treść” div

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

Właściwości CSS zastosowane do elementu DIV o nazwie klasy „główny" wspomniane poniżej:

• "kolor tła”Jest określony do ustawienia koloru tła elementu.
• "szerokość„Właściwość określa szerokość elementu HTML.
• "wysokość„Właściwość określa wysokość elementu HTML.
• "Padding-Left„Właściwość jest wykorzystywana do dodawania przestrzeni po lewej stronie zawartości elementu HTML.
• "margines lewic„Właściwość ustawia miejsce po lewej stronie elementu DIV.

Wyjście

Może to zaobserwować z powyższego wyniku, że pozycja obrazu jest naprawiona do okna przeglądarki w „35px” od góry i „16px” od lewej.

Wniosek

CSS „pozycja„Własność jest powiązana z wartością”naprawił„Wartość, aby ustawić pozycję elementu ustalonego na jeden punkt. Ponadto, ta właściwość jest dostosowywana o właściwości przesunięcia, takie jak dół, górny, prawy i lewy. Ten blog wykazał metodę, aby uczynić stałą pozycję elementu w CSS z praktycznym przykładem.