Pożizzjoni relattiva - x'inhu? deskrizzjoni dettaljata

Nesting HTML - proċess twil, rigorużi, iżda ħafna kreattivi. Minkejja l-fatt li għall-maġġoranza tan-nies impjegati fl-IT, paġni tal-web tqassim jista 'jidher rutina boring, speċjalisti li jkollhom vokazzjoni għal F'tali każ, mhux biss kwalitattivament iwettqu l-kompitu, iżda wkoll jirċievu mill-proċess ta' divertiment tanġibbli.

Madankollu, qabel ma inti ssir Coder esperjenza, kull esportaturi ġodda tonfoq ħafna ħin jistudjaw l-istruzzjonijiet varji u l-ispeċifikazzjonijiet ta 'kemm il-lingwa HTML, u fuq alleat tagħha - CSS. Dwar eżattament dak CSS, dak li hu u dak "widnejn feint" jippermettilek li tikseb sa, kif ukoll wieħed mill-proprjetajiet aqwa tagħha - Pożizzjoni relattiva - illum aħna ser jitkellmu.

X'inhu CSS?

Abbrevjazzjoni CSS jistgħu jiġu traskritti u tradotti Russa bħala "folji stil cascading". Hija ħsejjes pretty stramba - min-naħa waħda, jidher ċar, u kliem, u fuq l-oħra - it-tifsira ġenerali ma jinqabdux immedjatament. Nibdew bl-sempliċi - ma 'stil. Din it-teknoloġija jippermettilek li tehmeż oġġetti fuq il-paġna, ċerti karatteristiċi dwar l-apparenza li inti tista 'tirreġistra aktar minn darba u jużaw numru infinit ta' drabi.

Il-kelma "mejda" fid-traduzzjoni uffiċjali deher kważi mill-inċident - fil-fatt aktar xieraq hawn tkun li tuża l-kelma "listi" jew "listi", madankollu l-awturi tat-traduzzjoni oriġinali iddeċieda li l-CSS qisu aktar minn lista, u min aħna tali issa huwa li jippruvawhom.

Fl-aħħarnett, il-kelma "Cascade." Il-fatt hu li kull element jista 'jkollu diversi stili li jistgħu jkunu mħallta jew saħansitra jikkoinċidu. F'każijiet bħal dawn, il-browser irid jirrikorri għal sett ta 'regoli, sabiex jikkomponu l-apparenza tal-blokk, li irriżultaw li huma diversi stili, ma' wieħed minnhom, per eżempju, għandha Pożizzjoni proprjetà relattiva, u l-oħra - Pożizzjoni assoluta. Fil-fatt, tali kunflitti ma tistax tiġi tolerata, iżda fi proġetti kbar bħal konfużjoni jiġri spiss.

Allura issa, meta kollox huwa ċar mill-isem, ejja nħarsu lejn eżempju sempliċi. Ejja ngħidu sit tiegħek għandha tkun numru kbir ta 'buttuni, mfassla b'ċertu mod. Huma għandhom proprjetajiet bħad-daqs, dell, opaċità, kulur. Of course, inti tista 'tispeċifika dawn il-parametri, il-ħolqien kull buttuna, iżda huwa ħafna aktar faċli għall-użu CSS. Fil-prattika, inti għandek bżonn biex jiddeskrivi ċerta klassi, li jelenka l-valuri ta 'kull tal-proprjetajiet ta' hawn fuq, u mbagħad, minflok ta 'lista twila,-tikketta ta' kull buttuna jeħtieġu biss li tispeċifika l-isem tal-klassi, allura l-browser innifsu se kulur dawn l-elementi fil-kulur mixtieqa u tagħtihom xieraq "tleqqija".

X'tagħmel l-proprjetà Pożizzjoni?

Aħna issa tipproċedi direttament għall-Pożizzjoni proprjetà, għall-fini ta 'li kien beda dan l-artikolu kollu. Jekk inti familjari mal-lingwa Ingliża, jew ikollhom intwizzjoni tajba, allura inti għandek diġà tkun ċara - din il-proprjetà hija responsabbli għall-post ta 'l-oġġett. Fil-fatt, il-mod huwa, iżda minflok jiddeterminaw il-post speċifiku, din il-proprjetà jirrakkonta l-browser kif għandu jitpoġġa wieħed jew element ieħor fir-rigward jmissu jew madwar il-paġna kollha kemm hi.

Liema valuri jistgħu l-proprjetà Pożizzjoni?

proprjetà tagħna tista 'taċċetta diversi valuri differenti, hemm biss ħames. Hawnhekk huwa deskrizzjoni qasira ta 'kull:

• Jirtu pożizzjoni. Din il-karatteristika jippermettilek li kopja tad-data dwar il-pożizzjoni tal-element li hija ġenitur. Per eżempju, jekk għandek div bi relattiva Pożizzjoni speċifikat, allura daħal fis dan b'valur jirtu IMG wkoll se jiġu ffissati għal relattiva.
• Pożizzjoni statiku. Dan il-valur huwa mogħti għall-elementi kollha awtomatikament, sakemm ma jiġix iddikjarat aktar. L-elementi jinkwadraw fil-pożizzjoni kif imsemmi fil-kodiċi u ma jkunux disponibbli għal varjetà ta ' "frills", li jippermetti li jibdel il-pożizzjoni tagħhom.
• Pożizzjoni assoluta. Minn dan il-valur l-proprjetà Pożizzjoni huwa spiss tintuża f'każijiet fejn huwa meħtieġ li tinħoloq "floating" Element. B'valur partikolari ta 'l-oġġett proprjetà hija "inviżibbli" għall-komponenti l-oħra ta' l-paġna. Dan huwa, huma rranġati bħallikieku element assolut tagħna ma teżistix. Hu stess dejjem se jkun fis-seħħ, irrispettivament minn kemm ġew paġna impress.
• Pożizzjoni fissi. F'ħafna modi, dan il-valur huwa simili għal dak preċedenti, madankollu, filwaqt li l-element assolut huwa marbut li l-ġenitur, l-użi biss il-koordinati tal-rokna tax-xellug ta 'fuq tal-iskrin browser fiss, jinjora l-bqija tal-elementi li ppreċedew dan.
• Fl-aħħarnett, Pożizzjoni relattiva. Dan valuri tip jippermetti element pożizzjonar relattiv għall-oħra, li jistgħu jkunu utli għall-ħolqien ta 'adattivi immarkar imsejħa in komuni "gomma". Ma 'din il-proprjetà, il-partita se "push" l-oħra, mingħajr ma jitilfu l-abbiltà li jibdel il-pożizzjoni tagħhom fuq il-paġna.

Ħidma mal-Pożizzjoni fil-browsers differenti

Mhux browsers huma ugwalment kumpatibbli. Filwaqt li ħafna programmi alternattivi għall-Internet surfing mingħajr ebda hitches valur tal-Pożizzjoni perċepiti huwa assolutament veru, "kronikament speċjali» Internet Explorer jikkunsidra l-proprjetà, jiddependi fuq il-verżjoni tiegħu.

Per eżempju, bl-użu diġà "midfuna" il-browser IE6, inti ma tistax tuża l-valur fissi u Jirtu - "ħmar" huma sempliċiment tinjora dan. Madankollu, minkejja l-fatt li s-seba verżjoni tas-sitwazzjoni beda jtejjeb, u fissi diġa 'proċessati, li Jirtu għeżież "browser download browsers oħra," laħaq biss tmien Inkarnazzjoni tiegħu.

Il-bqija tal-osservaturi kalma jimmaniġġjaw Pożizzjoni bl-ewwel verżjoni, bl-eċċezzjoni ta 'Opera, li marret l-appoġġ tal-proprjetajiet fil-varjazzjonijiet tiegħu 4, ippubblikat f'nofs is-snin 90.

Ħidma mal-Pożizzjoni Javascript

Fil-fatt, l-istorja ta 'kif jaħdmu mal-proprjetà Pożizzjoni fl Javascript huwa, għandna inklużi biss għall-finijiet ta' diċenza. Minħabba din il-proprjetà ma jkollhom xi karattri speċjali fit-titolu, tista 'tuża l-JS mingħajr ebda bidliet, per eżempju, li tiffissa l-Pożizzjoni div relattiva, għandha tinkludi linja bħal din: div.style.position = "relattiv".

Kif tistgħu taraw, huwa pjuttost sempliċi.

Għaliex Pożizzjoni merti relattivi attenzjoni speċjali?

Filwaqt li ħafna mill-Pożizzjoni valuri tal-proprjetà, li tqiegħed lilha ħafif, "spat" fuq l-elementi tal-madwar, permezz tal-valur "Pożizzjoni stil: relattiva", għandhom dejjem tiftakar dwar il-paġna kollha kemm hi, minħabba użu mhux xieraq jista qawwi "skew"-kontenut kollu ta 'l-iskrin .

Barra minn hekk, din il-proprjetà jippermetti biss li inti faċilment tikkonverti adattivi disinn fiss, minħabba l-applikazzjoni tagħha se awtomatikament jaffettwa paġni kollha kontenut. Imbagħad aħna xorta jkollhom il-ħin biex jikkunsidraw l-eżempji u l-iżbalji li jużaw dan il-valur, u se tara sinifikat tanġibbli tagħha fil-prattika.

Meta għandek tuża posizzjoni relattiva?

Minbarra l-format konvenzjonali ta 'paġni HTML, relattiva Pożizzjoni drabi jintużaw biex joħloq varjetà ta' effetti interessanti. Per eżempju, jekk inti tixtieq oġġett "daħal" fuq paġna jew, għall-kuntrarju, gradwalment marret lil hinn territorju tiegħu, huwa preċiżament din il-proprjetà jista 'jgħinek timplimenta dan "trick".

Dawn "tricks" huma implimentati permezz Javascript huwa, jew, jekk inti jimmiraw għall-impożizzjoni progressiva, permezz tal-proprjetajiet ta 'CSS3, li jippermettu li inti taġġusta l-bidla ċiklika fil-valur ta' varjabbli partikolari.

Barra minn hekk, f'xi każijiet possibbli biex joħolqu relattiva valuri "ibridi" Pożizzjoni. CSS, għalkemm mhux fl-istess ħin jippermettilek li jistabbilixxu xi ħaġa bħal pożizzjoni: relattiva assolut, iżda bl-użu xi tricks, huwa xorta possibbli li jinkiseb dan l-effett. Dan l-approċċ jista 'jkun utli fil-każijiet fejn għandek bżonn biex joħolqu xi ħaġa kumplessa bħal Tooltip jew pop-up menu. Meta wieħed iqis l-eżempji, aħna se tagħti deskrizzjoni tal-istruttura ta 'tali "ibrida."

Eżempji ta 'użu tal-klassifikazzjoni relattiva

Pożizzjoni relattiva - huwa pjuttost sempliċi, iżda għodda flessibbli li tippermetti li inti jimplimentaw varjetà ta 'effetti interessanti. Sabiex ma jaħlux ħin u post biex jikteb mudell kodiċi inutli, aħna preżenti algoritmi orali diversi, li jistgħu dekorazzjoni sit tiegħek jew il-paġni speċifiċi.

Nibdew bl "jispiċċaw" linja. Ejja ngħidu li għandek bżonn ta 'element li se "vjaġġ" minħabba li l-tarf tax-xellug tal-iskrin u bil-mod jmexxuha għal-lemin. Biex timplimenta tali "mekkaniżmu" għandu jistabbilixxi pożizzjoni: relattiva; xellug: -100px, fejn -100 - in-numru approssimattiv ta 'l-pixels li jikkostitwixxu l-wisa blokka. Dan l-istil se jippermetti li inti biex jaħbu l-unità barra tal-iskrin, it-tqegħid tagħha fil- "pożizzjoni tat-tluq". Issa tista 'tuża b'kitba li se jżidu kull millisekondi ftit valur tal-proprjetà għal kull unità tax-xellug sakemm ma ssirx daqs il-wisa' tat-tieqa browser mingħajr il-wisa 'tal-element. Ir-riżultat huwa unità li toħroġ mill-tarf tax-xellug, irrumblati madwar l-iskrin u "pparkjati" fil-lemin tiegħu.

Eżempju ieħor jippermettilek li toħloq "relattiv-assoluti" elementi. Per eżempju, inti tista 'tidħol assoluta ġewwa ieħor, li jkollhom relattiva Pożizzjoni. Bħala riżultat, aħna għandna "relattiv" blokk li ma jkollhom l-daqs li għalih l-assoluta tkun inkluża, issa hija f'pożizzjoni li timmanifesta ruħha f'pożizzjoni indipendenti tal-element ta 'qabel.

żbalji tipiċi meta jużaw relattiva Pożizzjoni

L-iżball aktar komuni meta jużaw l-relattiva Pożizzjoni huwa li disinjaturi web ħafna tinsa dwar il-kapaċità li jirriżervaw post fl-unità, li jistgħu jinstabu kullimkien. Per eżempju, jekk għandek pjuttost kbir, imqiegħda barra tal-iskrin u li jkollhom posizzjoni relattiva, fil-post tagħha se jkun bil-qsim fihom "toqba". Madankollu, anke din il-proprjetà hija kultant toħloq ċerti inkonvenjenzi jistgħu jintużaw għall-ġid, per eżempju, il-ħolqien effett interessanti ta ' "awto-assemblaġġ" tas-sit, fejn kollha ta' blokki tagħha huma gradwalment mqiegħda fil-pożizzjoni ta 'fuq: 0; xellug: 0; t. e. post oriġinali tiegħu.