Własność pozycji CSS | Wyjaśnione

Arkusze stylów kaskadowych (CSS) składa się z szerokiej gamy właściwości używanych do stylizowania elementów HTML, na przykład właściwość kolorów służy do zapewnienia tekstu na stronach internetowych, właściwość wyświetlacza określa zachowanie elementów HTML, właściwości graniczne, graniczne właściwości graniczne definiuje specyfikacje graniczne elementu, a lista jest długa. Ten zapis został jednak zaprojektowany tak, aby rzucić światło na właściwość położenia CSS. Ten przewodnik obejmuje następujące.

1. Właściwość pozycji
2. Jak przypisać względne pozycjonowanie do elementu HTML
3. Jak przypisać bezwzględne pozycjonowanie do elementu HTML
4. Jak podać ustaloną pozycję elementowi HTML

Właściwość pozycji

Właściwość pozycji CSS określa pozycję elementu HTML na stronie internetowej. Ma poniżej wspomnianą składnię.

Pozycja: wartość;

Oto przykład dalszego wykazania właściwości pozycji.

Jak przypisać względne pozycjonowanie do elementu HTML

Ten przykład pokazuje względną wartość właściwości pozycji, która umieszcza element w odniesieniu do jej pierwotnej pozycji.

W tym przykładzie umieszczamy obraz w określonej pozycji za pomocą względnej wartości właściwości pozycji.

Html

CSS

.obraz
Pozycja: względny;
Po lewej: 80%;
TOP: 0%;
Wysokość: 100px;
szerokość: 200px;

Wyjście

Tutaj obraz jest ustawiany 80% od lewej strony w odniesieniu do pierwotnej pozycji.

Domyślna pozycja obrazu jest następująca.

Istnieją pewne wartości, które można przypisać do właściwości pozycji CSS, które są następujące.

Wartość	Opis
statyczny	Jest to wartość domyślna, która umieszcza elementy zgodnie z ich pozycją zdefiniowaną w dokumencie.
względny	Pozycjonuje element w odniesieniu do pierwotnej pozycji.
absolutny	Umieszcza element w odniesieniu do pozycji przodka elementu.
naprawił	Umieszcza element w odniesieniu do okna przeglądarki.
lepki	Umieszcza element w odniesieniu do pozycji przewijania użytkownika.
wstępny	Umieszcza element do wartości domyślnej.
dziedziczyć	Umieszcza element w odniesieniu do właściwości odziedziczonych z jego elementu nadrzędnego.

Kilka więcej przykładów

Aby uzyskać lepsze zrozumienie, zilustrowaliśmy właściwość pozycji za pomocą kilku dodatkowych przykładów.

Jak przypisać bezwzględne pozycjonowanie do elementu HTML

Ten przykład pokazuje wartość bezwzględną właściwości pozycji.

Html

Rodzica div
Dziecko div

Tutaj dwa przykłady są tworzone elementy, które są uważane za rodzica Div, a drugi za Dziecko Div.

CSS

Div dla macierzystów przypisano pozycję względną, a Dziecko Divowi przypisano pozycję bezwzględną. Jak wiemy, że wartość bezwzględna pozycjonuje element w odniesieniu do pozycji jego rodzica, dlatego dziecko Div miało bezwzględną pozycję w odniesieniu do Div Parent, przypisaliśmy rodzicielskiej Div pozycji względnej.

Wyjście

Dziecięcy div został umieszczony w absolutnej pozycji w odniesieniu do rodzicielskiej div.

Jak podać ustaloną pozycję elementowi HTML

Ten przykład pokazuje stałą wartość właściwości pozycji.

Html

Żółty div

Red Div

Zielony div

Stworzyliśmy trzy elementy jeden po nazwie Yellow Div, drugi po nazwie Red Div i trzeci Div po nazwie Green Div.

CSS

.żółty
kolor tła:#ffe162;
szerokość: 400px;
Wysokość: 500px;

.czerwony
kolor tła:#FF6464;
szerokość: 300px;
Wysokość: 350px;

.zielony
kolor tła:#91C483;
szerokość: 200px;
Wysokość: 100px;
Pozycja: Naprawiono;
Po lewej: 70%;
TOP: 50%;

P
Wyściółka: 20px 0;
Text-Align: Center;
Font-Family: „Segoe Ui”, Tahoma, Genewa, Verdana, bez-serif

W powyższym przykładzie tylko zielona div przypisuje się ustaloną pozycję, dlatego po przewijaniu strony internetowej zielona div pozostaje ustalona w pozycji w odniesieniu do okna przeglądarki.

Wyjście

Green Div z powodzeniem przypisano ustalone pozycjonowanie.

Wniosek

Właściwość Pozycji CSS określa pozycję elementu HTML na stronie internetowej, a ponadto wartości, które może to pokazać; statyczne, które jest wartością domyślną, wartość bezwzględna pozycjonuje element w odniesieniu do jego elementu nadrzędnego, ustalona wartość pozycjonuje element w odniesieniu do okna przeglądarki, wartość względna pozycjonuje element w stosunku do jego pierwotnej pozycji, a wartość lepka pozycjonuje element z elementem z elementem z elementem z elementem szacunek dla pozycji przewijania użytkownika. Właściwość pozycji i jej różne wartości są zilustrowane w tym zapisie za pomocą przykładów.