HTML bloko elementas yra elementas, kuris pagal numatytuosius nustatymus užima visą pirminio elemento plotį. Pirminis elementas gali būti kitas bloko elementas arba naršyklės langas. Galite nustatyti bloko elemento plotį ir aukštį naudodami CSS ypatybes. Blokų elementų padėties nustatymas yra jų išdėstymo naršyklės lange ir jų atžvilgiu procesas. naudojant CSS savybių padėtis, kairė, viršuje, dešinėje ir apačioje. CSS nuosavybė padėtis skirta nurodyti vieną iš keturių galimų padėties nustatymo tipų: statinį (numatytąjį), absoliutų, fiksuotą ir santykinį. Likusios CSS ypatybės, būtent kairysis , viršutinis , dešinysis ir apatinis , yra naudojamos atstumams nuo pirminio elemento kairiojo, viršutinio, dešiniojo ir apatinio kraštų nustatyti. Taip pat, nustatant tam tikras savybes, blokų elementai gali persidengti vienas su kitu, o šią funkciją galima naudoti ir svetainėse.
Numatytoji padėties nustatymas (statinis)
Jei nenurodėte bloko elemento padėties arba nurodėte statinį , o tai yra tas pats dalykas, tada bloko elementai išdėstomi eilės tvarka. Be to, kitas blokas (pavyzdžiui: raudonas) yra su nauja linija. Be to, šiai padėties nustatymui neturi įtakos atstumų nustatymas kairėje, viršuje, dešinėje ir apačioje.
Absoliutus padėties nustatymas (absoliutus)
At absoliutus pozicionavimas Elemento padėtis nustatoma naršyklės lango kraštų atžvilgiu, naudojant atstumus, nurodytus kairėje , viršuje , dešinėje ir apačioje. Jei vienu metu nurodote atstumus į kairę ir į dešinę ir jie prieštarauja vienas kitam, tada pirmenybė teikiama kairėje , tas pats pasakytina apie viršų ir apačią , kuriose viršenybė teikiama atstumui viršuje. Absoliutus pozicionavimas labai dažnai naudojamas kartu su santykiniu pozicionavimu projektavimo tikslais, kai reikia išdėstyti įvairius elementus vienas kito atžvilgiu.
Fiksuotas padėties nustatymas
Fiksuotas padėties nustatymas skiriasi nuo kitų pozicionavimo tipų ir nejuda kartu su turiniu, kai slenkate puslapiu. Fiksuotos padėties bloko elementai yra pritvirtinami prie naršyklės lango kraštų naudojant kairę , viršutinę , dešinę ir apatinę ypatybes. Fiksuotas padėties nustatymas naudojamas rėmelių sąsajoms kurti (naršyklės langas yra padalintas į keletą sričių), fiksuotas meniu, fiksuota svetainės poraštė ir „nuolatiniai“ blokai (nuorodų sąrašas, socialiniai mygtukai ir kt.).
Santykinis padėties nustatymas
Santykinė padėtis nurodoma nurodant atstumus kairėje , viršuje , dešinėje ir apačioje, palyginti su dabartine padėtimi.
Tačiau šią bloko poziciją taip pat galima sukurti naudojant paraštės ypatybę.
Santykinį padėties nustatymą nėra smagu naudoti atskirai, jis dažniausiai naudojamas kartu su absoliučia padėties nustatymu.
Apsvarstykime variantus:
Padėties nustatymas CSS atrodo gana paprastas. Nurodykite, kuris blokas ir kur jis turėtų būti. Tačiau viskas nėra taip paprasta, kaip atrodo iš pirmo žvilgsnio. Yra keletas dalykų, kurie gali suklaidinti naujokus. Galite gauti daug daugiau naudos iš padėties nustatymo, jei išsamiai suprasite, kaip tai veikia.
Dėžutės modelis CSS ir pozicionavimo tipai.
Prieš pradedant, patariu perskaityti straipsnį „Box Model“ CSS. Trumpai tariant: kiekvienas html elementas yra stačiakampis, kuriame galite nurodyti vidinės ir išorinės paraštės reikšmes, taip pat juos skiriančią kraštinę.
Padėties nustatymo schemos apibrėžia, kur šis stačiakampis turėtų būti, taip pat kaip jis turėtų paveikti aplinkinius elementus.
Pozicijos ypatybė CSS gali turėti penkias reikšmes:
- absoliutus
- giminaitis
- pataisyta
- statinis
- paveldėti
Vertė statinė yra numatytoji. Bet kuris elementas su statine padėtimi yra bendrame dokumento sraute. Jo išdėstymo taisykles nustato Box modelis. Tokių elementų viršuje, dešinėje, apačioje ir kairėje ypatybės bus ignoruojamos. Norint naudoti šias savybes, elemento padėtis turi būti absoliuti, santykinė arba fiksuota.
Paveldėjimo reikšmė, kaip ir visos kitos CSS ypatybės, naudojama siekiant užtikrinti, kad elementas naudotų tą pačią vertę kaip ir pirminis elementas.
Absoliutus pozicionavimas
Absoliutus padėties nustatymas pašalina elementą iš bendro dokumento srauto. Kalbant apie aplinkinius elementus, šiuo atveju jie tiesiog ignoruoja ieškomą elementą, tarsi jame būtų rodoma: none; . Jei nenorite, kad vietos tokiam elementui užpildytų kiti elementai, tuomet reikia sugalvoti kitokį požiūrį.
Elemento padėtį nustatote naudodami absoliučią padėtį naudodami viršutines , kairiosios , dešinės ir apatinės ypatybes. Jums tereikia nurodyti du iš jų: viršuje arba apačioje ir kairėje arba dešinėje. Jei ypatybės nenurodytos, viršutinė kairioji pora nustatoma į 0.
Raktas į absoliutų padėties nustatymą yra suprasti, koks yra jūsų atskaitos taškas. Jei viršutinė ypatybė nustatyta į 20 pikselių, iš kur jie turėtų būti skaičiuojami?
Atsakymas paprastas: tokie elementai yra išdėstyti artimiausio pirminio elemento, kurio padėtis kitokia nei statinė, atžvilgiu. Jei tokio elemento nėra, tada elementas yra išdėstytas pagrindinio dokumento atžvilgiu. Tai reiškia, kad nustatant absoliučią padėties nustatymą, CSS nurodo naršyklei pažvelgti į pirminį elementą ir, jei jo padėtis nėra statiška, jis turi sulygiuoti dabartinį elementą jo atžvilgiu.
Santykinis padėties nustatymas.
Santykinai išdėstyti elementai išdėstomi atsižvelgiant į jų pačių padėtį, įprastą poslinkį, palyginti su įprasta vieta. Tai panašu į elemento užpildymo pridėjimą naudojant paraštės ypatybę. Tačiau yra vienas reikšmingas skirtumas: gretimi elementai, naudojant padėties nustatymą, neatsižvelgia į šį poslinkį.
Įsivaizduokite taip: tam tikras vaizdas juda, o jo vietoje lieka „vaiduoklis“, visi elementai yra šio „vaiduoklio“ atžvilgiu. Tai leidžia sluoksniuoti elementus vienas ant kito.
Taigi elementai su santykine padėtimi paimami iš įprasto elemento srauto, tačiau vis tiek daro įtaką gretimų elementų išdėstymui, kurie veikia taip, kad pradinis elementas vis dar yra dokumento sraute.
Šiuo atveju neturėtume kelti klausimo, koks elementas čia yra. Atsakymas visada yra: normalus dokumentų srautas. Atrodo, kad pridėjote elemento užpildymą, bet tuo pačiu nepaveikėte gretimų elementų.
Fiksuotas padėties nustatymas
Fiksuotas padėties nustatymas veikia panašiai kaip absoliutus padėties nustatymas su nedideliais skirtumais.
Pirma, fiksuotos padėties elementas visada yra naršyklės lango atžvilgiu, o pirminiai elementai nepaisomi.
Antrasis skirtumas kyla iš jo pavadinimo. Fiksuoti elementai fiksuojami puslapyje. Slenkant jie nejuda.
Z indeksas
Svetainės puslapis yra dvimatis. Jis turi aukštį ir plotį. Z indeksas prideda trečią dimensiją – gylį.
Kuo didesnis šis indeksas, tuo aukščiau elementas yra puslapyje. Su juo galime užtikrinti, kad vienas elementas būtų dedamas ant kito. Pagal numatytuosius nustatymus jo reikšmė yra nulis. Neigiamos vertės taip pat yra priimtinos.
Tiesą sakant, z indeksas yra daug sudėtingesnis, nei aš jį čia aprašiau, bet tai yra kito straipsnio tema. Dabar svarbiausia atsiminti pačią trečiojo dimensijos idėją ir tai, kad šią savybę gali naudoti tik išdėstyti elementai.
Padėties nustatymo problemos.
Pažvelkime į keletą dažniausiai pasitaikančių problemų, susijusių su padėties nustatymu, ir keletą žodžių apie tai, kaip jas išspręsti.
- Negalite tuo pačiu metu naudoti pozicijos ypatybių ir slankiojo ypatybių tame pačiame elemente. Abi šios savybės turi įtakos elemento vietai, todėl bus naudojama paskutinė nurodyta savybė.
Iš komentarų:
Galite naudoti poziciją: santykinis ir plūduriuoti tuo pačiu metu.
Kai pozicija:absoliutus ir float nurodomi vienu metu, taikoma ne paskutinė nurodyta savybė. Šiuo atveju, nepriklausomai nuo šių stilių eilės, taikoma pozicija:absoliutus, o gauta (arba apskaičiuota) float savybės reikšmė nustatoma į none, nepriklausomai nuo pradinės reikšmės, t.y. ignoruojamas.
- Absoliučiai išdėstytų elementų paraštės nesugriūna. Tarkime, kad puslapyje yra pastraipa, kurios apatinė paraštė yra 20 pikselių. Po jo yra vaizdas, kurio viršutinė paraštė yra 30 pikselių. Atstumas tarp vaizdo ir teksto bus ne 50px (20px + 30px), o 30px (30px > 20px). Toks elgesys vadinamas griūvančiomis paraštėmis. Dvi įtraukos sujungiamos į vieną. Absoliučiai išdėstyti elementai neturi griūties paraščių, todėl rezultatas gali būti ne toks, kokio tikitės.
- IE ir z indeksas. IE6 elementas visada pasirenkamas krūvos viršuje, neatsižvelgiant į jo z indeksą arba aplinkinių elementų z indeksą.
IE6 ir IE7 turi dar vieną z indekso problemą. IE žiūri į pirminį elementą, kad nustatytų, kurioje elementų grupėje yra krūvos viršuje, kitos naršyklės naudoja pasaulinį kontekstą. Pavyzdžiui:
Tikimės, kad pastraipa bus aukštesnė už vaizdą, nes jos z indeksas yra didesnis. Tačiau IE6 ir IE7 pateikia vaizdą aukščiau, nes jie yra skirtingose dokumentų krūvose. Vienas krūvas skirtas div, antrasis img, o vaizdo z indeksas didesnis nei div.
Išvada
Padėties ypatybė nustato elemento padėties nustatymo elgesį pagal vieną iš padėties nustatymo schemų. Galimos nuosavybės vertės yra absoliučios, santykinės, fiksuotos, statinės (numatytosios) ir paveldimos.
Padėties nustatymo schemos apibrėžia elemento patalpinimo tinklalapyje taisykles, taip pat įtaką gretimų elementų padėčiai.
Ypatybę z indeksas galima taikyti tik elementams, kurių pozicijos ypatybių rinkinys. Jis prideda trečiąjį puslapio aspektą ir nustato elementų krūvos tvarką.
Padėties savybė atrodo lengvai suprantama, tačiau ji veikia šiek tiek kitaip, nei atrodo iš pirmo žvilgsnio. Dažnai kūrėjai mano, kad jiems reikia santykinio pozicionavimo, nors greičiausiai jie turėtų naudoti absoliučią padėties nustatymą. Iš esmės float ypatybė naudojama maketuojant, o pozicijos ypatybė būtina elementams, kuriuos norima „išplėšti“ iš bendro dokumento srauto.
Naudodami CSS padėties nustatymą, galite įdėti elementą tiksliai toje vietoje, kur norite. Kartu su plūdėmis (žr. 13 pamoką) padėties nustatymas suteikia puikių galimybių sukurti tikslius ir sudėtingus dizainus.
Šioje pamokoje aptarsime šiuos dalykus:
CSS padėties nustatymo principai
Įsivaizduokime naršyklės langą kaip koordinačių sistemą:
CSS padėties nustatymo principai yra tokie, kad langelį galite išdėstyti bet kurioje koordinačių sistemos vietoje.
Tarkime, kad norime paskelbti titulą. Naudojant dėžutės modelį (žr. 9 pamoką), antraštė atrodo taip:
Jei norime jį išdėstyti 100 pikselių nuo dokumento viršaus ir 200 pikselių iš kairės, turime įvesti šį CSS kodą:
H1 (padėtis:absoliutus; viršuje: 100 taškų; }
kairėje: 200 taškų;
Štai rezultatas:
Absoliutus pozicionavimas
Kaip matote, CSS padėties nustatymas yra labai tiksli elementų išdėstymo technika. Tai daug lengviau nei naudoti lenteles, skaidrius vaizdus ar bet ką panašaus.
Elementas, esantis visiškai negauna jokios vietos dokumente. Tai reiškia, kad po padėties jis nepalieka tuščios vietos. Norint absoliučiai išdėstyti elementą, pozicijos ypatybė turi turėti reikšmę absoliutus . Galite naudoti vertes, paliko, teisingai viršuje Ir apačioje
Kaip absoliutaus padėties nustatymo pavyzdį, dokumento kampuose įdėsime 4 langelius:
#box1 ( padėtis: absoliutus; viršuje: 50 pikselių; padėtis: absoliutus; kairėje: 50 pikselių; padėtis: absoliutus;) #box2 ( padėtis: absoliutus; viršuje: 50 pikselių;
dešinėje: 50 pikselių;
) #box3 ( apačioje: 50 pikselių; dešinėje: 50 pikselių;
) #box4 ( apačioje: 50 pikselių; kairėje: 50 pikselių;
)
Santykinis padėties nustatymas
Norėdami palyginti elemento padėtį, nustatykite pozicijos ypatybę į
giminaitis
. Skirtumas tarp santykinio absoliutaus padėties nustatymo yra tai, kaip apskaičiuojama padėties nustatymas.
< body > < div class = "box-1" > < div class = "box-2" > < div class = "box-3" > < div class = "box-4" > < / div > < / div > < / div > < / div > < / body > |
Elemento padėtis, palyginti su
apskaičiuojamas pagal pradinę padėtį dokumente
. Tai reiškia, kad elementą perkeliate į dešinę, kairę, aukštyn arba žemyn. Taigi elementas po pozicionavimo vis tiek užima vietą dokumente. Kaip santykinės padėties nustatymo pavyzdį, pabandykime įdėti tris paveikslėlius, palyginti su jų pradine vieta puslapyje. Atkreipkite dėmesį, kad po perkėlimo brėžiniai paliko tuščios vietos pradinėse dokumento vietose. Ar vis dar nesuprantate, kaip CSS veikia absoliutus padėties nustatymas, ir prarandate elementus ekrane? Supraskime šią magiją. Įvadas į pozicionavimą Kai nustatote poziciją: absoliutus , į priekį iškyla ne pats elementas, o jo pirminis konteineris, nes padėties nustatymas CSS yra santykinis su juo. Sunkumas yra tas, kad tai ne visada yra tiesioginis elemento tėvas. Kaip santykinės padėties nustatymo pavyzdį, pabandykime įdėti tris paveikslėlius, palyginti su jų pradine vieta puslapyje. Atkreipkite dėmesį, kad po perkėlimo brėžiniai paliko tuščios vietos pradinėse dokumento vietose. Pažiūrėkime į kodą su keturiais „div“, įtaisytais vienas kito viduje, kaip lizdinėje lėlėje. |
Dėžės-1 , box-2 ir box-3 yra centruotos dėl grožio, naudojant paraštę: auto ir flex CSS ypatybes. 4 dėžutės blokas lieka numatytoje padėtyje dokumentų sraute. korpusas ( ekranas: lankstus; ) .box-1, .box-2, .box-3 ( ekranas: lankstus; paraštė: automatinis; ) kūnas (
ekranas: lankstus; 1 langelis,
2 langelis,
- 3 langelis (
- Marža: auto;
Visi 4 elementai turi numatytąją padėtį. Įjungta šiuo metu išdėstymas atrodo taip:
.box-4 su absoliučia padėtimi be poslinkio Dabar pridėkime ypatybes viršuje: 0 ir kairėje: 0 . Elementas turi nustatyti, kuris pirminis konteineris taps šių koordinačių atskaitos tašku. Artimiausias elementas, turintis nestatinę padėtį (dažniausiai padėtis: santykinis), tampa juo. langelis-4 vienas po kito pradeda tardyti savo protėvius. Netinka nei 3 laukelis, nei 2 laukelis, nei 1 langelis, nes jie turi numatytąją CSS padėties vietą (nustatyta).
Jei išdėstytas protėvis nerastas, elementas dedamas dokumento korpuso atžvilgiu:
.box-4 su absoliučia padėtimi. Pirminiai elementai be padėties nustatymo Jei nustatote padėtį: langelio-1 elemento atžvilgiu, jis tampa atskaitos tašku:
.box-4 su absoliučia padėtimi. .box-1 su santykine padėtimi Absoliučiai išdėstytas elementas yra išdėstytas artimiausio jo protėvio atžvilgiu.
Suradus atskaitos tašką, viskas, kas yra virš jo DOM medyje, nustoja reikšmės.
Jei nustatysite poziciją: santykinis ir langeliui-2 , tada langelis-4 bus išdėstytas jo atžvilgiu, nes šis protėvis yra arčiau.
.box-4 su absoliučia padėtimi. .box-2 su santykine padėtimi Taip pat dėžės-3 konteineriui:
Šiomis dienomis žiniatinklio kūrėjai gali kurti sudėtingus tinklalapių maketus naudodami įvairius CSS metodus. Kai kurios iš šių technikų turi ilgą istoriją (plūduriavimas), kitos (flexbox) pastaraisiais metais išpopuliarėjo.
Šiame straipsnyje atidžiau pažvelgsime į kai kuriuos mažai žinomus dalykus apie CSS padėties nustatymą.
Prieš pradėdami, greitai apibendrinkime pagrindus. įvairių tipų padėties nustatymas.
Galimų padėties nustatymo metodų apžvalga
CSS pozicijos ypatybė nustato elemento padėties tipą.
Padėties nustatymo parinktys
static yra numatytoji padėties nustatymo savybės vertė. Patariame, kad šis elementas nenaudotų padėties nustatymo – padėties nustatymas taikomas tik tuo atveju, jei nurodote kitokį nei numatytasis padėties nustatymo tipą.
Norėdami tai padaryti, pozicijos ypatybę turite nustatyti į vieną iš šių reikšmių:
- giminaitis
- absoliutus
- pataisyta
- lipnus
Ir tik nustatę padėties nustatymą galite naudoti ypatybes, kurios kompensuoja elementą:
- teisingai
- apačioje
- Pradinė šių savybių vertė yra raktažodį auto.
Reikėtų atsižvelgti į tai, kad jei elemento padėties savybė nustatyta į absoliučią arba fiksuotą , tai yra absoliučiai išdėstytas elementas. Taip pat z-index ypatybė pradeda veikti išdėstytiems elementams, o tai lemia krovimo tvarką.
Pagrindinių pozicionavimo metodų skirtumai
Dabar greitai pažvelkime į tris pagrindinius skirtumus tarp galimų padėties nustatymo tipų:
- absoliučiai (absoliučiai) išdėstyti elementai visiškai pašalinami iš srauto, jų vietą užima artimiausi kaimynai.
- santykinai išdėstyti (santykiniai) ir klijuoti (lipni) išlaiko savo vietą sraute, o artimiausi kaimynai jos neužima. Tačiau šių elementų paminkštinimas neužima vietos, bet kiti elementai į jį visiškai nepaiso ir dėl to elementai gali sutapti.
- fiksuoti elementai (o fiksuotas padėties nustatymas yra absoliutaus tipas) visada yra išdėstyti matomumo srities atžvilgiu (nekreipiant dėmesio į padėties buvimą protėviuose), o lipnūs elementai yra išdėstyti artimiausio protėvio atžvilgiu slenkant (perpildymas: automatinis). Ir tik jei tokių protėvių nėra, jie yra išdėstyti matomumo zonos atžvilgiu.
Išsamiau tai galite pamatyti demonstracijoje:
Pastaba: fiksuotas padėties nustatymas vis dar yra eksperimentinė technologija, kuriai naršyklių palaikymas yra ribotas. Žinoma, jei norite, galite naudoti polifillą, kad pridėtumėte šią funkciją prie naršyklės, tačiau, atsižvelgiant į mažą jos paplitimą, ši savybė straipsnyje nebus aptariama.
Padėties nustatymo elementai su absoliutaus padėties nustatymo tipu
Esu tikras, kad dauguma žmonių žino, kaip veikia absoliutus padėties nustatymas. Tačiau daugelis dalykų gali suklaidinti pradedančiuosius.
Todėl nusprendžiau pradėti nuo jo, aprašydamas mažai žinomas pozicionavimo ypatybes.
Taigi, absoliučiai išdėstytas elementas yra perstumtas, palyginti su artimiausiu jo protėviu. Žinoma, tai veikia, jei kurio nors iš protėvių padėtis yra kitokia nei statinė – jei elementas neturi išdėstytų protėvių, jis yra perkeltas matomumo srities atžvilgiu.
Tai parodo toks pavyzdys:
Šioje demonstracijoje žalias blokas iš pradžių yra absoliučiai su nuliniu užpildu apačioje: 0 ir kairėje: 0 , jo protėvis (raudonas blokas) iš viso nebuvo išdėstytas.
Tačiau mes palyginome išorinį apvalkalą (elementą su klasės jumbotronu). Atkreipkite dėmesį, kaip keičiasi žalio bloko padėtis, kai pasikeičia jo protėvių padėties tipas.
Absoliučiai išdėstyti elementai nepaiso plūduriavimo savybių
Jei plūduriuojančiam elementui pritaikysime absoliučią arba fiksuotą padėties nustatymą, slankioji savybė bus nustatyta į None . Kita vertus, jei nustatysime santykinę padėtį, elementas išliks plūduriuojantis.
Pažvelkite į atitinkamą demonstracinę versiją:
Šiame pavyzdyje apibrėžiame du skirtingus elementus, kurie plūduriuoja į dešinę. Atkreipkite dėmesį, kad kai raudonas blokas tampa absoliučiai išdėstytas, jis nepaiso plūduriuojančios savybės, o santykinai išdėstytas žalias blokas išlaiko plūduriuojančią vertę.
Absoliučiai išdėstyti vidiniai elementai tampa blokiniais elementais
Inline elementas su absoliučia arba fiksuota padėtimi įgauna blokinio elemento savybes. Inline elementų konvertavimas į blokinius elementus išsamiau aprašytas lentelėje.
Šiuo atveju sukūrėme du skirtingus elementus. Pirmasis (žalias blokas) yra bloko elementas, o antrasis (raudonas blokas) yra eilutinis elementas. Iš pradžių matosi tik žalias blokas.
Raudonas langelis nematomas, nes jo pločio ir aukščio savybės veikia tik su bloko ir eilutinio bloko elementais, o kadangi jis neturi turinio, jis neturi jokių matmenų.
Kai raudonam blokui priskiriate absoliučią arba fiksuotą padėtį, jis tampa bloko bloku ir įsigalioja jame nurodyti blokų dydžiai.
Absoliučiai išdėstyti elementai neturi paminkštinimo
Pagal numatytuosius nustatymus, kai susiliečia dvi vertikalios paraštės, jos sujungiamos į vieną, lygią didžiausiai jų dydžiui. Tai vadinama maržos žlugimu.
Absoliučiai išdėstytų elementų elgesys čia panašus į plūduriuojančius elementus – jų paminkštinimas nėra derinamas su kaimynais.
Šioje demonstracijoje elementui suteikiamas 20 pikselių užpildymas. Jo užpildas susitraukia kartu su pirminio elemento užpildu, kuris taip pat yra 20 pikselių. Kaip matote, tik su absoliučia padėtimi nėra žlugimo.
Bet kaip galime užkirsti kelią maržos žlugimui? Turime tarp jų įdėti tam tikrą skirtuką.
Tai gali būti užpildymas arba kraštinė ir gali būti taikomas tiek pirminiams, tiek antriniams elementams. Kita galimybė yra pridėti aiškią pataisą prie pagrindinio elemento.
Elementų išdėstymas su pikseliais ir procentais
Ar kada nors naudojote procentus, o ne pikselius elementų išdėstymui? Jei atsakymas yra teigiamas, žinote, kad elemento poslinkis priklauso nuo pasirinktų vienetų (pikselių arba procentų).
Tai šiek tiek painu, ar ne? Taigi pirmiausia pažiūrėkime, ką specifikacija sako apie procentinį poslinkį:
Poslinkis kaip pagrindinio bloko pločio (kairėje ir dešinėje) arba aukščio (viršuje arba apačioje) procentas. Klijuotiems elementams poslinkis skaičiuojamas procentais nuo srauto pločio (kairėje ir dešinėje) arba aukščio (viršuje arba apačioje). Neigiamos vertės yra priimtinos.
Kaip minėta, kai nustatote poslinkį procentais, elemento padėtis priklauso nuo pirminio elemento pločio ir aukščio.
Demonstracinė versija rodo šį skirtumą:
Šiame pavyzdyje poslinkiui naudojami pikseliai ir procentai. Žinoma, kai nurodote poslinkį pikseliais, elementas perkeliamas ten, kur reikia.
O jei poslinkiui pasirinksime procentą, rezultatas priklausys nuo pirminio elemento dydžio. Štai vizualizacija, rodanti, kaip apskaičiuojama nauja pozicija:
Pastaba: kaip tikriausiai žinote, transformavimo ypatybė (kartu su įvairiomis vertimo funkcijomis) taip pat leidžia keisti elemento padėtį. Tačiau šiuo atveju, naudojant procentus, skaičiavimas bus pagrįstas paties elemento dydžiu, o ne jo pirminiu.
Išvada
Tikiuosi, kad šis straipsnis padėjo geriau suprasti pozicionavimą CSS ir paaiškino kai kuriuos iššūkius.