Używanie pozycji w CSS

CSS zapewnia różne właściwości do stylizowania stron internetowych utworzonych w HTML. Korzystając z tych właściwości, możesz zaprojektować różne elementy. Jedną najbardziej fantastyczną własnością jest „pozycja" nieruchomość. CSS „pozycja„Własność jest jedną z najczęstszych i najczęstszych właściwości wykorzystywanych do dostosowania położenia elementów HTML.

Niniejszy podręcznik poprowadzi Cię o właściwość pozycji CSS. Więc zacznijmy.

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

W CSS „pozycja”Służy do określenia, gdzie element pojawi się na stronie na podstawie jego pozycji. Połączenie go z górną, prawą, dolną i lewą właściwościami CSS określa, gdzie element zostanie umieszczony.

Składnia

Składnia właściwości pozycji CSS podano poniżej:

Pozycja: Wartości

W miejscu "wartość”, Możesz ustawić pozycję elementów jako„statyczny”,„względny”,„absolutny", I "naprawił".

Przyjrzyjmy się bliżej każdej wartości z przykładami, aby zrozumieć, w jaki sposób wpływają one na pozycję elementów strony.

Przykład

W HTML dodamy dwa pojemniki wewnątrz znacznika ciała i przypisamy nazwę klasy do pierwszego Div jako „div1”I drugi Div jako„div2”:

Div 1
Div 2

Następnie stylizujemy ciało strony internetowej, używając „ciało”W CSS i ustaw kolor tła ciała jako„RGB (127, 255, 212)”:

ciało
kolor tła: RGB (127, 255, 212);

Można zauważyć, że na stronie internetowej stosuje się kolor tła:

W naszym pliku CSS użyj „div„Aby zastosować te same właściwości na kontenery jednocześnie. Dostosuj szerokość i wysokość Div jako „100px”I margines jako„30px". Aby ustawić kształt divs, użyj „Radiusz graniczny„Właściwość i ustal jej wartość jako„30px". Następnie dostosuj tekst div za pomocą „tekst-align„Właściwość, aby ustawić tekst div na„Centrum”Pozycja i„Wysokość linii„Nieruchomość jako„100px”:

div
szerokość: 100px;
Wysokość: 100px;
Margines: 30px;
RADIUS BRAVES: 10px;
Text-Align: Center;
Wysokość linii: 100px;

Następnie ustaw kolor Div, aby je odróżnić. Aby to zrobić, użyj „.div1„Aby uzyskać dostęp do pierwszego Div i ustawić jego kolor tła jako„RGB (236, 226, 128)”:

.div1
kolor tła: RGB (236, 226, 128);

Teraz wykorzystaj „.div2„Aby uzyskać dostęp do drugiej div i ustawić kolor tła jako„RGB (187, 166, 214)”:

.div2
kolor tła: RGB (187, 166, 214);

Wynik powyższego kodu podano poniżej:

Co to jest „statyczna” pozycja w CSS?

"statyczny”Służy do ustawienia pozycji w odniesieniu do normalnego przepływu strony. Jest ustawiony domyślnie. Ponadto właściwości górne, dolne, lewe i prawe nie mają na to wpływu.

Przykład

Tutaj ustawimy pozycję obu Div jako statyczną. Zauważ, że wszystkie inne właściwości obu kontenerów pozostaną takie same:

.div1
…
Pozycja: statyczny;

.div2
…
Pozycja: statyczny;

Widać, że Divs są umieszczone w ich pierwotnej pozycji:

Co to jest „względna” pozycja w CSS?

Aby ustawić pozycję elementu w stosunku do jego normalnej pozycji, „względny„Wartość właściwości pozycji jest wykorzystywana.

Przykład

Ustawimy pozycję „div1" Jak "względny" I "div2" Jak "absolutny". Tutaj drugi div jest ustawiony zgodnie z Div1:

.div1
…
Pozycja: względny;

.div2
…
Pozycja: absolutna;

Oto wynik, który pokazuje, że Div2 jest dostosowywane zgodnie z pozycją Div 1:

Co jest „ustalona” pozycja w CSS?

Elementy HTML można naprawić na przeglądarce za pomocą „naprawił„Wartość właściwości pozycji. Pozycja stałych elementów jest określana przez rzutek, obszar dokumentu, który jest obecnie widoczny. Używając okna przeglądarki jako odniesienia, ten stały element jest ustawiony w stosunku do niego.

Przykład

Ustawimy pozycję „div1" Jak "naprawił" I "div2" Jak "statyczny". Tutaj użyjemy wartości statycznej, aby ustawić pozycję „div2„Zgodnie z normalnym przepływem strony:

.div1
…
Pozycja: Naprawiono;

.div2
…
Pozycja: statyczny;

Tutaj widać, że pozycja „div1”Jest ustalone i„div2”Jest ustawiony zgodnie z przepływem strony:

Jaka jest „absolutna” pozycja w CSS?

W "absolutny”Umieszczenie, element jest ustawiony w stosunku do pierwszego elementu nadrzędnego, który nie jest statyczny. Ponadto element można ustawić w dowolnym miejscu na stronie za pomocą pozycjonowania bezwzględnego.

Przykład

Ustawimy pozycję „div1" Jak "względny" I "div2" Jak "absolutny". Następnie użyjemy „spód„Nieruchomość jako„5px„Aby ustawić div2 na dole strony:

.div1
…
Pozycja: względny;

.div2
…
Pozycja: absolutna;
Dół: 5px;

Poniższy obraz pokazuje, że Div2 jest umieszczony na dole strony:

Otóż ​​to! Wyjaśniliśmy szczegółowo opis właściwości pozycji.

Wniosek

Aby ustawić pozycję elementu HTML, „pozycja„Wykorzystana jest własność CSS. Właściwość pozycji obsługuje cztery różne wartości, takie jak statyczny, względny, stały i bezwzględny. W tym artykule szczegółowo wyjaśniliśmy właściwość pozycji i podaliśmy przykłady dla wszystkich jej wartości.