CSS savybė „position“
Naršant internete tikriausiai teko ne vieną kartą pamatyti unikalų dizainą su įdomiais išdėstytais grafikos elementais po visą tinklalapį arba paspaudus ant nuotraukos, ji atsidaro su efektais. Turbūt pasirodė, jog visa tai padaryti sudėtinga ir nesigilinote, kaip visa tai įgyvendinama. Nors gali pasirodyti, kad tai sunku, iš tikrųjų egzistuoja position savybė, kuri labai paprastai leidžia „stumdyti“ blokus po visą tinklalapį.
Daugumai bus girdėta ši savybė, tačiau su ja nedirbote, nes pasirodė, kad per daug painu ją naudoti. Šiek tiek pabandysime pažaisti su position savybe ir pasiaiškinkime jos galimybes.
Position: static (numatytoji reikšmė)
Kiekvienas blokinis elementas (<div>, <table>, <p> ir pan.) turi position reikšmę, kurios numatytoji reikšmė yra static (statinė). Static pozicija yra griežta ir hierarchiška: objektas visada eis žemiau, nei ankstesnis blokas. Norėdami suprasti jos veikimą, susikurkime tris skirtingus blokus:
#block-1, #block-2, #block-3 { width: 150px; height: 30px; }
#block-1 { background-color: #3C81F8; }
#block-2 { background-color: #FC5D5D; }
#block-3 { background-color: #97C435; }
Gausime tokį vaizdą:
Atrodo paprasta ir elementaru: blokai laikydamiesi griežtos struktūros „nulipa“ į apačią.
Position: absolute
Pabandykime tiems blokams suteikti laisvės: išmėtykime juos po naršykles langą. Veiksmą atlikime su tais pačiais blokais, kuriuos sukūrėme anksčiau, tik jiems sukteikime naują CSS savybę ir priskirkime jai reikšmę: position: absolute.
#block-1, #block-2, #block-3 { width: 150px; height: 30px; position: absolute; }
Blokai išsimėtė, kadangi jiems nebuvo nustatyta pozicija, todėl jie apsistojo viename taške. Reikia atkreipti dėmesį, kad žemiausiai buvęs blokas yra aukščiausioje pozicijoje, arba kitaip galima pasakyti, kad blokai laikosi hierarchijos: #block-1 pirmoje pozicijoje, #block-2 - antroje, #block-3 - trečioje.
Poziciją galima nustatyti su left, top, right, bottom (atitinkamai reiškia: kairė, viršus, dešinė, apačia) CSS savybėmis, nurodę reikšmę px, pt, em ar % matavimo vienetais.
#block-1, #block-2, #block-3 { width: 150px; height: 30px; position: absolute; }
#block-1 { background-color: #3C81F8; top: 20px; left: 1em; }
#block-2 { background-color: #FC5D5D; top: 4%; left: 30%; }
#block-3 { background-color: #97C435; right: 70%; bottom: 80%; }
Nustatydami top reikšmę 20px, atitrukiame bloką nuo viršaus 20px. Nustatę left reikšmę 1em, atitraukiame bloką nuo kairio šono 1em. Ir t.t. Tačiau negalima vienu metu nustatyti top ir bottom ar left ir right reikšmių, nes tai būtų nelogiška; tokiu atveju CSS ignoruotų pirmąją reikšmę. Jeigu blokui nurodytume tokias CSS savybes:
#block-1 { position: absolute; left: 20px; right: 80px; }
CSS imtų antrą nurodytą reikšmę (right).
Dar vieną pastabą, kurią vertėtų paminėti: jeigu nustatote poziciją procentais, tai keičiant naršyklės lango dydį atitinkamai keisis ir objekto vieta puslapyje.
Labai svarbu atkreipti dėmesį, kad nustatę absolute pozicijas, blokai visiškai nebesilaiko struktūros, t.y. jeigu mes šiuos blokus įdėsime į naują sukurtą bloką, jie išliks savo pozicijoje, arba, kitaip sakant, „lips vieni kitiems ant galvų“.
Taigi, sukurkime naują div „apvalkalą“ ir įdėkime tuos tris blokus į jį.
<div id="wrap"> <div id="block-1"></div> <div id="block-2"></div> <div id="block-3"></div> </div>
#wrap { width: 100%; height: 120px; background-color: #CCC; }
Kaip matome, blokai užsifiksavo savo pozicijose ir nekreipia dėmesio į savo tėvinį bloką.
Position: relative
Galbūt kiek sunkiau bus perprast šią pozicijos reikšmę. Nustatydami absolute poziciją, objektai išsimėtydavo nesilaikydami jokios hierarchijos ir „neieškodami“ savo tėvinio bloko (šiuo atveju mūsų tėvinis blokas yra div #wrap). Arba, kitaip sakant, blokų pozicijos buvo nustatomos atsižvelgiant naršyklės lango matmenis (kraštus).
O dabar, norėdami, kad pozicija būtų nustatoma ne nuo naršyklių kraštų, o nuo tėvinio bloko (#wrap), tai mūsų blokui (#block-1) nustatykime position: relative savybę. Šiuo atveju pasiliksiu tik vieną bloką (#block-1), kad paprasčiau būtų dirbti.
#wrap
{
width: 100%;
height: 120px;
background-color: #EEE;
border: 1px solid #CCC;
}
#block-1
{
width: 150px; height: 30px;
background-color: #3C81F8;
top: 0; left: 1em;
position: relative;
}
Nustačiau top: 0; savybę blokui, tam kad pamatytume, jog blokas yra prie bloko #wrap viršaus.
Nepmarškime ir tokio dalyko, kad jeigu mūsų objektas (#block-1) nusistato poziciją nuo tėvinio bloko (#wrap), tai dar nereiškia, kad jis negali užeiti už tėvinio bloko ribų, tai galime įsitikinti nustatę top: 500px savybę savo objektui (#block-1).
Position: fixed
Na ir dar viena savybės reikšmė, kurią galima paminėti šiame straipsnyje — fixed. Pritaikius šią position savybės reikšmę, blokas slenka kartu su slinkties juosta, t.y. jeigu „scrollinate“ į apačią, taip pat slenkasi ir blokas. Kitaip galima būtų pasakyti - blokas lieka „prilipęs prie ekrano“ 
. Apačioje pateikiu CSS kodo pavyzdį.
#fixed-block
{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background-color: black;
}
Float vs. Position
Tik nesugalvokite nuo šiol kurti svetainės struktūrą naudodami position: absolute savybę. Nors ji yra gan patogi, tačiau praktikoje paprastiems tinklalapių šablonams taikomas rečiau. Kodėl? Tinklalapiuose laikomasi griežtos hierarchijos: jeigu pradėsite dėlioti objektus su position: absolute, tai blokai nebeturės jokio paveldimumo (poziijos atžvilgiu) ir nebus vienas nuo kito priklausomi, o tai sudarys didelę betvarkę. Tačiau galime rasti ir privalumų: jeigu reikia padėti objektą (tarkim kažkoks grafikos elementas) į tam tikrą puslapio vietą, arba jeigu svetainė yra gan dinamiška ir unikali bei neturi daug tekstinio turinio, tai ši savybė puikiausiai tam tiks (žinoma, su išimtimis). Pateiksiu kelis pavyzdžius.
Z-Index — kas tai?
Dar viena CSS savybė, kurią dauguma žmonių tik matė įvariuose koduose, pamokose ar kitur, nesigilinę į veikimo principą tikriausiai praleisdavom šią savybę.Kad ir kaip bauginančiai skamba, jos veikimo principą suprasti labai paprasta. Grįžkime prie pavyzdžių, kur nagrinėjome position: absolute CSS savybę.
Kaip žinome, naudojant position: absolute, blokai išsimėto laikydamiesi eiliškumo: pasižiūrėkime dar kartą tą pavyzdį, kur naudojant position: absolute blokai apsistojo viename taške ir matėme tik vieną žalią bloką (#block-3). Jeigu tuos blokus šiek tiek prasklaidytume kad jie visiškai neužliptų vienas ant kito, pamatysime, kokia eilės tvarka jie išsidėstė.
#block-1, #block-2, #block-3 { width: 150px; height: 30px; position: absolute; }
#block-1 { background-color: #3C81F8; top: 0; left: 0; }
#block-2 { background-color: #FC5D5D; top: 0; left: 40px; }
#block-3 { background-color: #97C435; top: 0; left: 80px; }
Tarkime, mums reikia, kad #block-1 eitų pirmiau arba kad būtų aukščiausioje pozicijoje, po to #block-2 ir galiausiai #block-3. Jau tikriausiai supratote, kad eiliškumą tvarkysime su z-index. Taigi, z-index savybė leidžia keisti išdėstymą Z ašyje (x, y, z plokštumoje).
Z-index reikšmė gali būti tik teigiamas sveikasis skaičius nuo 1 iki 9999.
#block-1, #block-2, #block-3 { width: 150px; height: 30px; position: absolute; }
#block-1 { background-color: #3C81F8; top: 0; left: 0; z-index: 3; }
#block-2 { background-color: #FC5D5D; top: 0; left: 40px; z-index: 2; }
#block-3 { background-color: #97C435; top: 0; left: 80px; z-index: 1; }
Kuo didesnė z-index reikšmė, tuo aukščiau blokas bus už kitus objektus.
Ajax (JavaScript) ir CSS position savybė
Dauguma ajax įskiepių ir skriptų naudoja position savybę. Peržvelkime kelis pavyzdžius.
Dažnai tenka matyti tokį įskiepį, kur paspaudus ant paveiksliuko jis atsidaro su gražia animacija: nyroModal, FancyBox...
Laukas su reikšmių pasiūlymais: pvz. į paieškos lauką vedate kažkokį raktažodį ir jums pasiūlo žodžius, iš kurių galite pasirinkti.
Papildomo pranešimo langas užvedus pelę ant tekstinės informacijos ar kito objekto.
Kaip matote, panaudojimo pavyzdžių yra daug. Neabejotinai esate matę ir kitų pavyzdžių, kurių čia nepateikiau, tačiau nuo šiol position savybė turėtų būti kur kas lengviau suvokiama.
Apibendrinimas
Tai kas atrodė bauginančiai, dabar tikriausiai atrodo paprasta. Taikant šią savybę galima sukurti daug įdomių dalykų: unikalų dizainą, naršyklinį žaidimą (aišku su JavaScript pagalba), pritaikyti kuriant kokį specifinį ajax skriptą. Manau ateityje, ši savybė bus vis dažniau naudojama, todėl žinoti jos galimybes ir panaudojimą - būtina. Taigi, dabar pasitelkę savo vaizduotę ir idėjas bandykite pritaikyti šią savybę ir sukurkite ką nors įdomaus.
2010-01-10 13:53:53
Gairės:
roki60