Tämän ominaisuusarvon asettaminen absoluuttiseksi vetää objektin pois normaalista dokumenttivirran absoluuttisesta sijoittelusta, riippumatta sisällön asettelusta sen ympärillä. Jos muut eri z-indeksiominaisuuksilla varustetut objektit ovat jo tietyssä paikassa, ne eivät vaikuta toisiinsa, vaan menevät päällekkäin samassa paikassa. Kohteessa ei ole ulkoista paikkaa (reunaa), mutta sisäinen paikka (tapding) ja reunus (reuna).
Aktivoidaksesi objektin absoluuttisen sijoittelun, sinun täytyy määrittää vähintään yksi vasen, oikea, ylä- ja alin attribuutti ja asettaa tämä attribuuttiarvo absoluuttiseksi. Muuten yllä olevat attribuutit käyttävät oletusarvoaan auto, jolloin objekti noudattaa normaaleja HTML-asettelusääntöjä ja renderöidään heti edellisen objektin jälkeen.
TRBL-attribuutit (YLÄ, OIKEA, ALA, VASEN) ovat voimassa vain, jos sijainti-attribuutti on asetettu.
Sinun pitäisi asettaa paikka:absoluuttinen
Jos vanhempi (ääretön) ei aseta sijaintiattribuuttia, nykyinen absoluutti sijoitetaan yhdessä TRBL-attribuutin kanssa selaimen vasempaan yläkulmaan alkuperäisenä pisteenä
Jos vanhempi (ääretön) asettaa sijaintiominaisuuden, nykyinen absoluutti sijoitetaan yhdessä TRBL-ominaisuuden kanssa vanhemman (viimeisin) ylävasempaan kulmaan alkuperäisenä pisteenä.
Kun asetetaan sijainti: suhteellinen
Vanhemman (viimeisimmän) sisältöalueen vasen yläkulma on alkuperäinen piste yhdistettynä TRBL-attribuuttiin (tai siirtymä suhteessa edelliseen elementtiin vanhemman sisältöalueella), ja RUNGON vasen yläkulma on alkuperäinen piste ilman vanhempaa. Suhteellista sijoittelua ei voi kerrostaa. Kun käytetään suhteellista sijoittelua, elementti vie silti alkuperäisen tilansa riippumatta siitä, siirretäänkö sitä vai ei. Siksi elementin siirtäminen saa sen ylikirjoittamaan muita laatikoita.
Yleisesti ottaen, jos verkkosivu on keskitetty, on helppo tehdä virheitä Absolutea käytettäessä, koska verkkosivu on aina mukautunut automaattisesti resoluution koon mukaan, kun taas Absolute käyttää selaimen vasenta yläkulmaa alkuperäisenä pisteenä eikä muuta sijaintia resoluution muutoksen vuoksi. Joskus on myös tarpeen luottaa z-indeksiin määrittääkseen yhteyden säiliön ylä- ja alaosan välillä: mitä suurempi arvo, sitä korkeampi yläosa ja numeerinen alue on luonnollinen luku. Tietenkin yksi huomioitava asia on, että vanhempi-lapsi-suhdetta ei voi asettaa z-indeksillä, ja lapsen tason täytyy olla vanhempien ylä- ja alapuolella.
Tämän ominaisuuden arvon asettaminen suhteelliseksi pitää objektin normaalissa HTML-virtauksessa, mutta sen sijainti voidaan siirtää edellisen objektin perusteella. Teksti tai esineet, jotka seuraavat suhteellista paikantajaa, vievät oman tilansa peittämättä sijoitettavan esineen luonnollista tilaa. Sen sijaan teksti tai objekti absoluuttisen sijainnin jälkeen täyttää luonnollisen tilansa ennen kuin kohdeobjekti vedetään pois normaalista dokumenttikulusta. Kun absoluuttinen sijoitteluobjekti asetetaan näkymän ulkopuolelle, vierityspalkki ilmestyy. Suhteellisen sijoittelukohteen sijoittaminen katselualueen ulkopuolelle ei näy vierityspalkin kanssa. Itse asiassa suurin ongelma sijoittelussa on muistaa kunkin asemoinnin merkitys. Suhteellinen asemointi on alkuelementin alkuperäinen sijainti "suhteessa dokumenttivirtaan", kun taas absoluuttinen sijoittelu on esi-elementti, joka on sijoitettu "suhteellinen" viimeisimpään.
Tässä ovat lisäykset:
Vaikka tiedän CSS:n absoluuttisen sijoittelun (absoluuttinen) ja suhteellisen sijoittelun, en ole koskaan kirjoittanut asiaankuuluvia vaikutuksia itse!
Yli puolen päivän työskentelyn jälkeen se voidaan pitää valmiina! Sain myös selville joitakin näistä kahdesta ominaisuudesta!
Yhteenveto on seuraava:
Katsotaanpa ensin seuraavaa kerrosrakennetta
<body>
<div id=posi>
<div id=rel> Tämä kerros soveltaa vain position:relative; Tyyli </div>
<div id=abs> Tämä kerros soveltaa vain position:absolute; Tyyli </div>
<div id=sss> ei <div>sovella tyyleihin
</div>
</body>
1. absoluuttinen: ei istu, sukulainen: on paikallaan!
Kuten ylärakenne:
Kerrokset, joissa on id rel, vievät yhden rivin näytettäessä! Sen takana oleva ABS-kerros näkyy vain seuraavalla rivillä!
Kun kerros, jossa on id ABS, näytetään, se menee päällekkäin SSS:n ID:n kanssa takana!
2. Oletuksena (ei yhdistettynä topin kanssa jne.), absoluuttinen (absoluuttinen asemointi) asetetaan vanhemman kerroksen mukaan
Esimerkiksi, jos yllä oleva kerros ID:llä on ABS, jos sitä ei ole sijoitettu yhdessä TOP:n kanssa, sen näyttöpaikka on vanhempaan POSI-kerrokseen (POSI on dokumentin vasemmassa alakulmassa ja myös vasemmassa alakulmassa)
3. Kun ylä-, ala-, oikea-, vasen ja muut ominaisuudet yhdistetään, absoluuttinen (absoluuttinen asemointi) sijoitetaan ikkunan sijaintiin, ja suhteellinen on siirtymässä oman käyttöasteensa kanssa lähtöviivana! Seuraavasti:
<body>
<div id=posi>
<div id=sss> ei <div>sovella tyyleihin
<div id=rel> Tämä kerros soveltaa position:relative; ala: 30px; Tyyli </div>
<div id=abs> Tämä kerros soveltaa vain position:absolute; ala: 30px; Tyyli </div>
</div>
</body>
Yllä oleva koodi:
Kerros, jossa on id rel, liikkuu ylöspäin ja päällekkäin id SSS:n kanssa
Kerros, jossa on ID ABS, siirretään 30 pikselin päähän ikkunasta, jossa ikkuna toimii peruslinjana!
4. Kun yhdistät ylä-, ala-, oikea-, vasen ja muut attribuutit, jos haluat absoluuttista (absoluuttista asemointia) käyttävän vanhemmaa tasoa paikantamisen perustana, voit soveltaa absoluuttisia tai suhteellisia attribuutteja vanhemmalle! Seuraavasti:
<body>
<div id=posi style="position:relative">
<div id=rel> Tämä kerros soveltaa position:relative; ala: 30px; Tyyli </div>
<div id=abs> Tämä kerros soveltaa vain position:absolute; ala: 30px; Tyyli </div>
</div>
</body>
Yllä oleva koodi: id on posi-kerros, voit myös käyttää absoluuttista attribuuttia!
id on REL-kerros, johon ei vaikuta, ja se kompensoidaan omalla paikkamerkkillään peruslinjana!
Kerros, jonka tunnus on ABS, perustuu POSI-kerroksen alareunaan paikannuslinjana; jos POSI-kerroksen korkeus on tällä hetkellä alle 30px, ABS-kerros ei välttämättä näe sitä!
|
Julkaistu 30.10.2014 14.39.28
|
|
|
