Selle omaduse väärtuse määramine absoluutseks tõmbab objekti tavapärasest dokumendivoo absoluutsest positsioneerimisest välja, sõltumata sisu paigutusest selle ümber. Kui teised objektid, millel on erinevad z-indeksi omadused, hõivavad juba antud positsiooni, ei mõjuta nad üksteist, vaid kattuvad samas kohas. Objektil ei ole välimist plaastrit (serv), kuid sisemine plaat (patting) ja ääris (ääris).
Objekti absoluutse positsioneerimise aktiveerimiseks pead määrama vähemalt ühe vasak-, parem-, ülemise, alumise atribuudi ning määrama selle atribuudi väärtuse absoluutseks. Vastasel juhul kasutavad ülaltoodud atribuudid oma vaikimisi väärtust auto, mis paneb objekti järgima tavapäraseid HTML-paigutusreegleid ja renderdama kohe pärast eelmist objekti.
TRBL atribuudid (ÜLEMINE, PAREM, ALUMINE, VASAK) kehtivad ainult siis, kui positsiooni atribuut on seatud.
Sa peaksid seadma positsiooni: absoluutne
Kui vanem (lõpmatu) ei määra positsiooni atribuuti, siis praegune absoluut paigutatakse koos TRBL atribuudiga brauseri vasakus ülanurgas algpunktina
Kui vanem (lõpmatu) määrab positsiooni omaduse, siis praegune absoluut paigutatakse koos TRBL omadusega vanema (hiljutise) vasakusse ülanurka kui algne punkt.
Positsiooni seadistamisel: suhteline
Vanema (hiljutise) sisuala ülemine vasak nurk on algne punkt koos TRBL atribuudiga (või nihkes võrreldes eelmise elemendiga paigutatud elemendist vanemsisualal) ning BODY ülemine vasak nurk on algne punkt ilma vanemata. Suhtelist positsioneerimist ei saa kihtida. Kui kasutatakse suhtelist positsioneerimist, hõivab element ikkagi oma algse ruumi sõltumata sellest, kas seda liigutatakse või mitte. Seetõttu põhjustab elemendi liigutamine teiste kastide ülekirjutamise.
Üldiselt, kui veebileht on keskel, on Absolute'i kasutamisel lihtne vigu teha, sest veebileht on alati automaatselt kohandunud resolutsiooni suurusega, samas kui Absolute kasutab brauseri vasakut ülanurka algse punktina ega muuda asukohta resolutsiooni muutuse tõttu. Mõnikord on vaja tugineda ka z-indeksile, et määrata seos anuma ülemise ja alumise vahel: mida suurem väärtus, seda kõrgem on ülemine ning numbriline vahemik on naturaalarv. Muidugi tasub märkida, et vanema-lapse suhet ei saa määrata z-indeksiga ning lapse tase peab olema vanemast kõrgem ja madalam.
Selle omaduse väärtuse määramine suhteliseks hoiab objekti normaalses HTML-voogus, kuid selle asukohta saab nihutada vastavalt eelmisele objektile. Tekst või objektid, mis järgivad suhtelist asukoha, hõivavad oma ruumi, katmata objekti loomulikku ruumi. Vastupidiselt sellele hõivab tekst või objekt pärast absoluutset positsioneerimisobjekti oma loomuliku ruumi enne, kui sihtmärk lohitakse tavapärasest dokumendivoost eemale. Absoluutse positsioneerimise objekti paigutamine vaateaknast väljapoole tekitab kerimisriba ilmumise. Suhtelise positsioneerimise objekti paigutamine vaateala kõrvale ei ilmu kerimisribaga. Tegelikult on peamine probleem positsioneerimisel meeles pidada iga positsioneerimise tähendust. Suhteline positsioneerimine on elemendi algpositsioneerimine "suhtes" dokumendivoo suhtes, samas kui absoluutne positsioneerimine on eelkäija, mis on positsioneeritud "suhtes" kõige uuema suhtes.
Siin on täiendused:
Kuigi ma tean CSS-i absoluutset positsioneerimist (absoluutset) ja suhtelist positsioneerimist, pole ma kunagi ise vastavaid efekte kirjutanud!
Pärast enam kui poole päeva töötamist võib seda pidada lõpetatuks! Ma sain ka mõned neist kahest omadusest aru!
Kokkuvõte on järgmine:
Vaatame esmalt järgmist kihistruktuuri
<body>
<div id=posi>
<div id=rel> See kiht rakendab ainult position:relative; Stiil </div>
<div id=abs> See kiht rakendab ainult position:absolute; Stiil </div>
<div id=sss> ei rakenda <div>stiile
</div>
</body>
1. absoluutne: ei hõiva kohta, sugulane: omab kohta!
Näiteks ülastruktuur:
Kihid, millel on id rel, hõivavad kuvamisel ühe rea! ABS-kiht selle taga ilmub alles järgmisel liinil!
Kui kuvatakse kiht, millel on ID ABS, kattub see SSS ID-ga taga!
2. Vaikimisi (mitte koos topiga jne) positsioneeritakse absoluutne (absoluutne positsioneerimine) vanemkihi poolt
Näiteks, kui ülaltoodud kiht ID-ga on ABS, kui seda ei paigutata koos TOP-iga, on selle kuvamiskoht koos vanema POSI kihi juures (POSI asub dokumendi vasakus alumises nurgas ja samuti vasakus alumises nurgas)
3. Kui kombineerida ülemist, alumisi, paremaid, vasak- ja teisi omadusi, positsioneeritakse absoluutne (absoluutpositsioneerimine) nii, et akent, ning suhteline nihutatakse oma täituvusega baasjoonena! Järgmine:
<body>
<div id=posi>
<div id=sss> ei rakenda <div>stiile
<div id=rel> See kiht rakendab position:relative; bottom: 30px; Stiil </div>
<div id=abs> See kiht rakendab ainult position:absolute; bottom: 30px; Stiil </div>
</div>
</body>
Ülaltoodud kood:
Kiht, millel on id rel, liigub ülespoole ja kattub kihi id SSS-iga
Kiht, millel on ID ABS, liigub aknast 30 piksli kaugusele, kus aken on baasjoon!
4. Kui kombineerida ülemise, alumise, parema, vasak- ja muid atribuute, siis kui soovid absoluutset (absoluutset positsioneerimist) kasutada vanemkihti positsioneerimise baasina, saad rakendada absoluutseid või suhtelisi atribuute vanemkihile! Järgmine:
<body>
<div id=posi style="position:relative">
<div id=rel> See kiht rakendab position:relative; bottom: 30px; Stiil </div>
<div id=abs> See kiht rakendab ainult position:absolute; bottom: 30px; Stiil </div>
</div>
</body>
Ülaltoodud kood: id on posi kiht, võid kasutada ka absoluutset atribuuti!
id on REL-i kiht, mida see ei mõjuta ja mida kompenseerib oma kohatäitja baasjoonena!
Kiht, mille ID on ABS, põhineb POSI kihi alumisel serval positsioneerimise baasjoonena; kui POSI kihi kõrgus on sel hetkel väiksem kui 30px, ei pruugi ABS kiht seda näha!
|
Postitatud 30.10.2014 14:39:28
|
|
|
