HTML-elementtien sijainnilla on tärkeä rooli web-sivun komponenttien järjestämisessä. Tarkemmin sanottuna elementtien sijaintia voidaan säätää käyttämällä CSS:ää ' asema ” omaisuutta. Tämä ominaisuus voidaan liittää offset-ominaisuuksiin, kuten ylä-, vasen-, oikea- ja ala-ominaisuuksiin, jotka tarjoavat erityisiä arvoja sivun elementin säätämiseksi. Kuitenkin ' ehdoton ” sijoitettuja elementtejä voidaan säätää suhteessa lähimpään sijoitettuun elementtiin.
Tämä viesti selittää CSS:n absoluuttisen sijainnin.
CSS 'position' -ominaisuus
' asema ” -ominaisuutta CSS:ssä voidaan käyttää elementin paikan säätämiseen. Sijaintiominaisuuden eri arvot ovat kiinteitä, absoluuttisia, suhteellisia, staattisia ja pysyviä. Nämä arvot asetetaan offset-ominaisuuksilla, kuten ylhäällä, oikealla, vasemmalla ja alhaalla, elementin sijainnin säätämistä varten.
Kuinka soveltaa CSS:n absoluuttista paikannusta?
Elementin absoluuttista sijoittelua voidaan soveltaa CSS:n avulla asema 'omaisuus arvolla' ehdoton ”. Elementti, jolla on absoluuttinen sijainti, säädetään lähimpään sijoitetun yläelementin mukaan. Mutta jos esi-isä ei ole sijoitettu, se mukautuu suhteessa asiakirjan runko-osaan.
Esimerkki
Ymmärretään konseptia käytännön esimerkillä.
Vaihe 1: Luo HTML-tiedosto
Lisää HTML-tiedostoon body-elementtiin div luokan nimellä ' pää ”. Lisää sitten luodun div:n sisään HTML-tunniste , joka liittyy seuraaviin määritteisiin:
-
- ' src ” tarjoaa linkin kuvaan.
- ' luokkaa ' käytetään CSS:ssä elementtien tyyliin.
- ' kaikki ”-attribuutti määrittää tekstin, joka näkyy kuvan tilalla, jos kuva ei lataudu sivulle.
- ' kaikki ”-attribuutti määrittää tekstin, joka näkyy sivulla kuvan tilalla, jos kuva ei lataudu sivulle.
Lisää sitten toinen div, joka sisältää otsikon ja kappaleen h1- ja p-elementit:
< div luokkaa = 'pää' >< div luokkaa = 'sisältö' >
< img src = 'images/linuxlogo.png' luokkaa = 'Koti' kaikki = 'Linux-logo' leveys = '80px' >
< h1 > CSS:n absoluuttinen paikannus h1 >
< s > Hei Linuxhint-tiimi ! s >
div >
div >
CSS:ssä käytetään useita tyyliominaisuuksia HTML-elementtien koristeluun.
Vaihe 2: Tyyli 'kaikki' elementit
* {kirjasinperhe: Verdana, Geneve, Tahoma, sans-serif;
}
HTML-elementit on muotoiltu käyttämällä ' font-perhe 'omaisuus arvolla' Verdana, Geneve, Tahoma, sans-serif ”. Tämä arvoluettelo varmistaa, että jos selain ei tue ensimmäistä tyyliä, käytetään toista tyyliä.
Vaihe 3: Tyyli 'koti'-jako
.Koti {sijainti: absoluuttinen;
yläreuna: 50px;
vasen: 45px;
}
Alla ovat ominaisuudet, joita sovelletaan ' Koti ” div:
-
- ' asema ”-ominaisuus määrittää elementin sijainnin. Tässä lisätty ' ehdoton ” sijoittaa elementin suhteessa HTML:n leipäosaan.
- ' alkuun ” -ominaisuutta hyödynnetään elementin pystysuunnassa.
- ' vasemmalle ” -ominaisuutta käytetään elementin vaakasuoraan säätöön.
Vaihe 4: Tyyli 'sisältö' jako
.sisältö {taustaväri: kadetinsininen;
leveys: 300 pikseliä;
korkeus: 250px;
täyte-vasen: 40px;
marginaali vasen: 80px;
}
Alla on CSS-ominaisuudet, joita käytetään ' sisältö ” div:
-
- ' taustaväri ”-ominaisuus määrittää elementin taustavärin.
- ' leveys ”-ominaisuus määrittää elementin leveyden.
- ' korkeus ”-ominaisuus määrittää elementin korkeuden.
- ' pehmuste-vasen ”-ominaisuus on asetettu lisäämään tilaa elementin sisällön vasemmalle puolelle.
- ' marginaali vasen ”-ominaisuus määrittää tilan elementin vasemmalla puolella.
Tässä vaiheessa verkkosivumme näyttää tältä:
Yllä olevasta tuloksesta voidaan nähdä, että div home -kuva on sijoitettu 50 kuvapisteen etäisyydelle ylhäältä ja 45 kuvapisteen etäisyydelle vasemmasta dokumentin rungosta. Lisäksi kotidiv:n sijainti asetetaan suhteessa HTML:n runko-osaan.
Kuinka säätää elementin sijaintia 'suhteessa' sijoitettuun yläelementtiin?
Tämä osio opastaa sinua säätämään elementin sijaintia suhteessa lähimpään aseman yläelementtiin.
Aseta 'position' Ominaisuus 'sisältö' div
asema: suhteellinen;
Jos haluat säätää elementin paikkaa suhteessa pääelementtiin, aseta ' asema emoelementin ominaisuus '' suhteellinen ”arvoa.
Aseta 'position' 'img'-elementin ominaisuus
.Koti {sijainti: absoluuttinen;
yläreuna: 100px;
vasen: 220px;
}
Tässä:
-
- ' asema '-ominaisuus, jonka arvoksi on asetettu ' ehdoton ” sijoitetaan suhteessa yläelementtiin (eli sisällön div-sijainti asetetaan arvolla suhteellinen).
- ' alkuun ” -ominaisuutta käytetään elementin sijainnin asettamiseen ylhäältä.
- ' vasemmalle ” -ominaisuutta käytetään elementin sijainnin asettamiseen vasemmalta.
Lähtö
Tuloksesta voidaan nähdä, että kuva on sijoitettu suhteessa emo-div:ään ja se näyttää sopivalta.
Johtopäätös
CSS' asema ” -ominaisuutta käytetään asettamaan HTML-elementtien sijainti. Tämä ominaisuus voidaan arvostaa kiinteäksi, suhteelliseksi, absoluuttiseksi, tahmeaksi ja staattiseksi. ' ehdoton ” arvo sijoittaa elementin lähelle sijoitettua yläelementtiä vastaavasti. Tämä viesti on selittänyt CSS:n absoluuttisen paikantamisen käytännön esimerkillä.