Položaj elementov HTML ima ključno vlogo pri organiziranju komponent spletne strani. Natančneje, položaj elementov je mogoče prilagoditi z uporabo CSS ' položaj ” lastnina. To lastnost je mogoče povezati z lastnostmi odmika, kot so lastnosti zgoraj, levo, desno in spodaj, kar zagotavlja posebne vrednosti za prilagoditev elementa na strani. Vendar pa je ' absolutno ” pozicionirane elemente je mogoče prilagoditi glede na najbližji pozicionirani element.
Ta objava bo pojasnila absolutno pozicioniranje CSS.
Lastnost CSS “position”.
' položaj ” lastnost v CSS lahko uporabite za prilagajanje položaja elementa. Različne vrednosti lastnosti položaja so fiksne, absolutne, relativne, statične in lepljive. Te vrednosti so nastavljene z lastnostmi odmika, kot so zgoraj, desno, levo in spodaj, za prilagajanje položaja elementa.
Kako uporabiti absolutno pozicioniranje CSS?
Absolutno pozicioniranje elementa je mogoče uporabiti s CSS ' položaj lastnost z vrednostjo absolutno ”. Element z absolutnim položajem se prilagodi glede na njegov najbližji nadrejeni element. Če pa prednik ni postavljen, se bo prilagodil glede na del telesa dokumenta.
Primer
Razumejmo koncept s praktičnim primerom.
1. korak: Ustvarite datoteko HTML
V datoteki HTML znotraj elementa body dodajte div z imenom razreda ' glavni ”. Nato znotraj ustvarjenega diva dodajte oznako HTML , povezano z naslednjimi atributi:
-
- “ src ” ponuja povezavo do slike.
- “ razred ” se v CSS uporablja za oblikovanje elementov.
- “ vse ” določa besedilo, ki se prikaže namesto slike, če se slika ne naloži na stran.
- “ vse ” atribut določa besedilo, ki se prikaže na strani namesto slike, če se slika ne naloži na stran.
Nato dodajte še en div, ki vsebuje elementa h1 in p naslova in odstavka:
< div razred = 'glavni' >< div razred = 'vsebina' >
< img src = 'images/linuxlogo.png' razred = 'dom' vse = 'linux logo' premer = '80px' >
< h1 > Absolutno pozicioniranje CSS h1 >
< str > Pozdravljena ekipa Linuxhinta ! str >
div >
div >
V CSS se za okrasitev elementov HTML uporablja več slogovnih lastnosti.
2. korak: Stilizirajte »vse« elemente
* {družina pisav: Verdana, Geneva, Tahoma, sans-serif;
}
Elementi HTML so oblikovani z uporabo ' družina pisav lastnost z vrednostjo Verdana, Ženeva, Tahoma, sans-serif ”. Ta seznam vrednosti zagotavlja, da če brskalnik ne podpira prvega sloga, bo uporabljen drugi.
3. korak: Slog 'domače' div
.domov {položaj: absolutno;
zgoraj: 50px;
levo: 45px;
}
Spodaj so lastnosti, uporabljene za » domov ” div:
-
- “ položaj Lastnost nastavi položaj elementa. Tukaj je dodano » absolutno ” bo element postavil glede na del telesa HTML-ja.
- “ vrh Lastnost se uporablja za navpično nastavitev elementa.
- “ levo Lastnost se uporablja za vodoravno prilagoditev elementa.
4. korak: Slog 'vsebine' div
.vsebina {barva ozadja: kadetsko modra;
širina: 300px;
višina: 250px;
oblazinjenje-levo: 40px;
rob-levo: 80px;
}
Spodaj so lastnosti CSS, ki se uporabljajo za » vsebino ” div:
-
- “ Barva ozadja ” nastavi barvo ozadja elementa.
- “ premer Lastnost nastavi širino elementa.
- “ višina Lastnost nastavi višino elementa.
- “ oblazinjenje-levo Lastnost je nastavljena tako, da doda prostor na levi strani vsebine elementa.
- “ rob-levo Lastnost določa presledek na levi strani elementa.
Na tej točki bo naša spletna stran videti takole:
Iz zgornjega rezultata je razvidno, da je slika doma div postavljena 50 slikovnih pik od vrha in 45 slikovnih pik od leve strani telesa dokumenta. Poleg tega je položaj domačega diva nastavljen glede na del telesa HTML-ja.
Kako prilagoditi položaj elementa 'relativno' glede na pozicionirani nadrejeni element?
Ta razdelek vas bo vodil pri prilagajanju položaja elementa glede na najbližji nadrejeni element položaja.
Lastnost »položaj« za »content« div
položaj: relativni;
Če želite prilagoditi položaj elementa glede na nadrejeni element, nastavite ' položaj ” lastnost nadrejenega elementa za “ relativno ” vrednost.
Nastavite lastnost »position« za element »img«.
.domov {položaj: absolutno;
zgoraj: 100 slikovnih pik;
levo: 220px;
}
Tukaj:
-
- “ položaj ' lastnost z vrednostjo, nastavljeno kot ' absolutno ” bo postavljen relativno glede na nadrejeni element (to pomeni, da je položaj razdelka vsebine nastavljen z relativno vrednostjo).
- “ vrh Lastnost se uporablja za nastavitev položaja elementa od zgoraj.
- “ levo Lastnost se uporablja za nastavitev položaja elementa z leve.
Izhod
Iz rezultata je razvidno, da je bila slika postavljena glede na nadrejeni div in je videti primerna.
Zaključek
CSS ' položaj Lastnost se uporablja za nastavitev položaja elementov HTML. Ta lastnost je lahko ovrednotena kot fiksna, relativna, absolutna, lepljiva in statična. ' absolutno ” vrednost bo postavila element, ki ustreza njegovemu bližnjemu pozicioniranemu nadrejenemu elementu. Ta objava je pojasnila absolutno pozicioniranje CSS s praktičnim primerom.