Asend - mis see on? üksikasjalik kirjeldus

Pesitsevate HTML - pikk protsess, range, kuid väga loominguline. Vaatamata sellele, et enamik inimesi töötab IT, veebilehti paigutus võib tunduda igav rutiinne, spetsialistid, kellel on kutsumus Sellisel juhul mitte ainult kvalitatiivselt ülesande täitmiseks, vaid ka saada protsessi materiaalse rõõm.

Kuid enne, kui muutuvad kogenud foto iga uustulnuk veedab palju aega uurides erinevaid juhiseid ja kirjeldused nii HTML keele ja selle liitlane - CSS. Umbes täpselt mida CSS, mis see on ja mida "teesklus kõrvad" võimaldab teil saada, samuti üks peamistest omadused - asend - täna räägime.

Mis on CSS?

CSS Lühend saab transkribeeritud ja vene keelde kui "kaskaadlaadistikke". Kõlab päris kummaline - ühelt poolt on selge, ja sõnad, ja teiselt - üldine tähendus ei ole kohe kata. Alustame lihtsa - stiilis. See tehnoloogia võimaldab teil lisada objekte lehel teatud omadusi seoses välimuse, mida saab registreerida ainult üks kord ja kasutada lõpmatu arv kordi.

Sõna "tabel" on ametlik tõlge ilmus peaaegu kogemata - tegelikult sobivam oleks siin kasutada sõna "nimekirja" või "nimekirju", aga autorite originaal tõlkimise otsustas, et CSS näeb rohkem kui nimekirja ja kes me oleme nagu nüüd proovida neid.

Sõnal "Cascade". Fakt on, et iga element võib olla mitu stiile, mida saab segada või isegi kattuvad. Sellistel juhtudel brauseri peab kasutama reeglistikku, et koostada välimuse plokk, mis osutus mitmeid stiile, ühe neist, näiteks on asendis vara ja teine - Positsioon absoluutne. Tegelikult sellised konfliktid ei saa lubada, kuid suurte projektide nagu segadust juhtub üsna tihti.

Nüüd, kui kõik on selge nimi, vaatame lihtsa näite. Oletame, et teie sait peaks olema suur hulk nuppe, mille eesmärk on teatud viisil. Neil on omadused nagu suurus, vari, läbipaistmatus, värvi. Muidugi, saate määrata need parameetrid, luues iga nupp, kuid on palju lihtsam kasutada CSS. Praktikas on vaja kirjeldada teatud klassi, kus on loetletud väärtused on kõik eespool omadused, ja siis selle asemel, et pika nimekirja, tag iga nupp on vaja vaid nimetage klassi, siis brauser ise värvida neid elemente soovitud värvi ja annab neile nõuetekohase "läige".

Mida teeb Positsioon vara?

Nüüd jätkake otse majutusasutusega seisukoha pärast, mis algas kogu see artikkel. Kui te olete tuttav inglise keeles, või on hea intuitsioon, siis peaks juba olema selge - see vara vastutab üksuse asukohta. Tegelikult nii see on, kuid selle asemel määrata konkreetse asukoha, selle vara ütleb brauser, kuidas see tuleb asetada ühe või teise elemendi osas kõrvuti või üle lehe tervikuna.

Mis väärtused positsioon saab vara?

Meie vara võib nõustuda mitmete erinevate väärtuste, on ainult viis. Siin on lühike kirjeldus iga:

• Positsioon päritud. See funktsioon võimaldab teil kopeerida andmeid positsiooni element, mis on vanem. Näiteks, kui teil on div koos täpsustatud asend, siis sisestatakse see IMG pärida raha ka seatakse Suhteline.
• Paigutage Staatiline. See väärtus on antud kõik elemendid automaatselt, kui ei ole märgitud enam. Elemendid sobituvad positsiooni nimetatud koodi ja ei ole saadaval erinevaid "rüüsidega", mis võimaldab muuta oma seisukohta.
• Positsioon Absolute. Selle väärtuse Positsioon majutusasutus üsna sageli kasutatakse juhul, kui see on vajalik, et luua "ujuvad" element. Mis antud vara väärtus toode on "nähtamatu" teiste komponentide lehel. See tähendab, et nad on paigutatud nii, nagu meie absoluutne element ei ole olemas. Ta ise on alati olemas, sõltumata sellest, kui kaugele on kerida lehel.
• Fikseeritud asendis. Paljuski see väärtus on sarnane eelmisega, aga samas absoluutne element on seotud vanema fikseeritud kasutab ainult koordinaadid ülemises vasakus nurgas brauseri ekraanil, ignoreerides ülejäänud elemendid, mis eelnes.
• Lõpuks asend. Seda tüüpi väärtusi võimaldab positsioneerimine element võrreldes teiste, mis võib olla kasulik luua adaptiivne märgis nimetatakse ühist "kummi". Selle vara, objekti "vajutab" teise kaotamata võime muuta oma positsiooni lehel.

Töö Positsioon erinevad brauserid

Mitte kõik brauserid on võrdselt sobivad. Kuigi enamik alternatiivseid programme Internet surfamine ilma haakeseadmed tajutav väärtus Positsioon on täiesti tõsi, "krooniliselt erilist» Internet Explorer leiab vara, sõltuvalt oma versiooni.

Näiteks kasutades juba "maetud" brauser IE6, te ei saa kasutada fikseeritud väärtuse ja päritud - "eesel" nad lihtsalt ignoreerida. Kuid vaatamata sellele, et seitsmes versioon olukord hakkas paranema ja fikseeritud juba töödeldud pärida armastatud "brauser alla laadida teiste brauseritega," jõudis ainult oma kaheksanda kehastus.

Ülejäänud vaatlejad rahulikult hakkama Positsioon esimese versiooni, välja arvatud Opera, mis on saanud toetust omadused oma 4 variatsioone, mis avaldati 90. aastate keskel.

Töö seisukoha Javascript

Tegelikult on lugu sellest, kuidas töötada Positsioon vara Javascript oleme lisanud ainult huvides sündsuse. Kuna see vara ei ole mingit erilist tähemärki pealkirjas, saate JS ilma muudatusteta, näiteks määrata div asend, peaks sisaldama sellist rida: div.style.position = "suhteline".

Nagu näete, see on üsna lihtne.

Miks asend väärib erilist tähelepanu?

Kuigi enamik vara väärtuste seisukoha pehmelt öeldes, "sülitas" ümbritsevate elementide abil raha "stiilis asukoht: sugulane", tuleb alati meeles pidada kogu leht tervikuna, sest väär kasutamine võib tugevalt "viltune" kogu sisu ekraanil .

Lisaks sellele vara ainult võimaldab teil kergesti konverteerida kindla disain adaptiivne, sest selle kohaldamine ei mõjuta automaatselt kogu sisu lehekülgedel. Siis on meil veel aega mõelda näiteid ja vead, kasutades seda väärtust, ja te näete oma materiaalse tähendus praktikas.

Millal tuleb kasutada suhtelise asukoha?

Lisaks tavapärasele paigutus lehekülgi HTML, asend sageli kasutatakse, et luua erinevaid huvitavaid efekte. Näiteks, kui soovite eset "tuli" lehel või, vastupidi, järk-järgult läks tema territooriumist kaugemale, see on täpselt see vara aitab teil rakendada seda "trikk".

Need "trikke" on ellu Javascript on või kui te eesmärk on järk-järgult kehtestamist kaudu omadusi CSS3, mis võimaldab teil kohandada tsükliline muutus väärtus eelkõige muutuja.

Lisaks mõningatel juhtudel võimalik luua "hübriid" väärtusi asendis. CSS, kuigi mitte samal ajal võimaldab teil määrata midagi seisukoht: absoluutne suhteline, kuid kasutades mõningaid nippe, on see siiski võimalik saavutada mõju. Selline lähenemine võib olla kasulik juhul, kui teil on vaja luua midagi keeruline nagu tooltip või pop-up menüüst. Arvestades näiteid, anname struktuuri kirjeldus sellise "hübriid".

Näiteid lehe suhtelist asetust

Asend - see on üsna lihtne, kuid paindlik vahend, mis võimaldab teil rakendada erinevaid huvitavaid efekte. Et mitte raisata aega ja koht kirjutada mõttetu koodi malli, tutvustame mitmeid suulise algoritme, mis võivad kaunistada saidile või konkreetse lehekülge.

Alustame "otsa" joon. Oletame, et teil on vaja element, mis "reisimine", sest vasakust servast ekraani ja aeglaselt liigutada paremale küljele. Rakendada sellist "mehhanism" peaks looma asukoht: sugulane; Vasakult: -100px, kus -100 - ligikaudne arv piksleid moodustavate ploki laiusest. See stiil võimaldab teil varjata üksuse väljaspool ekraani, pannes selle "stardipositsiooni". Nüüd saate skripti, mis suurendab iga mõne millisekundi jäänud vara väärtus ühiku nii kaua kui see ei muutu võrdse laiusega brauseriakna miinus laius element. Tulemuseks on üksus, mis väljub vasaku serva, valtsitud üle ekraani ja "pargitud" oma parema käe.

Teine näide võimaldab teil luua "suhteline-absoluutne" elemente. Näiteks saab sisestada absoluutne sees teise, millel on suhteline. Selle tulemusena on meil "sugulane" plokk, mis ei ole suurus, mille absoluutne on kantud, on nüüd võimalik avalduda positsiooni sõltumatu eelmise element.

Tüüpilised vead kasutamisel asend

Kõige tavalisem viga, kui kasutate asend on see, et paljud veebidisainerid unustada võime reserveerida koht üksus, mis võib asuda ükskõik kus. Näiteks, kui teil on üsna suur, paigutatakse väljaspool ekraani ja mille suhteline positsioneerimine, selle asemel on haigutav "auk". Kuid isegi see vara on mõnikord tekitab teatud ebamugavusi saab kasutada hea, näiteks luues huvitava efekti "self-kokkupanek" koha, kus kõik oma plokid järk paigutatud ülemisse asendisse: 0; Vasakul: 0; t. e. algsesse asukohta.