CSS z-index: një vështrim i përgjithshëm, pronat

Sundojë CSS z-index - faqe pozita element koordinojnë Z: nivelin e elementit ekran apo shtresa në të cilën ajo është e vendosur. Tag që ka z-indeks më i madh do të shfaqet në mënyrë të plotë. Tags janë shfaqur në mënyrë që ata të paraqiten në rrjedhjen hyrje dhe mbivendosen. приоритет видимости. Vlera e Z-indeksit përcakton përparësi shikimit.

Ne duhet të paguajë haraç për shfletuesit modern dhe elemente algoritme ekranit. Që nga ditët kur grafika dhe ekranet e kapur formuar pjesë problem i prerë dukshme dhe të padukshme të elementeve në dritaren e aplikimit, e dukshme përmbajtja teknologjinë e ekranit ka arritur rezultate të shkëlqyera. Në një dritare të shfletuesit, të gjitha elementet janë shfaqur si duhet, përdoruesi sheh vetëm atë që është e specifikuar dizajnin ose zhvilluesi i saj.

Rregulli i përgjithshëm: rendi dhe niveli i

Lumë input (faqe formuar server) sekuenciale lexon shfletuesin. Të gjithë tags janë shfaqur në përputhje me rregullat CSS dhe mund të përputhen.

Ky shembull përshkruan katër element të dukshëm. Çdo njëpasnjëshme përputhet një të mëparshme. Në vendet ku tags janë të kryqëzuara, nuk është një çështje e prioritetit. Si rregull z-indeksit klikoni CSS për të gjitha këto njëjtë dhe të barabartë me 848, ajo do të jetë e qartë se element që shkon si më poshtë. Të gjitha që peeks nga nën secilën prej elementit të ardhshëm, me sa duket.

rregulli shikimit

Browsers respektojë rregullat e shikimit vetëm "i drejtë". Për të dalë me një algoritmi që ju lejon për të analizuar të gjitha vendosjen e bruto dhe të përdorin vetëm ato që në fakt ndërpritet, duke përjashtuar ato pjesë të cilat janë të absorbohet nga çdo element të njëpasnjëshme - është shumë e vështirë.

Në shumicën e rasteve kjo nuk është e nevojshme. Pajisje moderne është shumë e shpejtë, dhe njoftim rishikimin element në pikën ku ajo do të bllokojë elementin tjetër, është shumë problematike.

Ndikimi mbi array element

Mjafton të tag tretë scCSS3 rritur z-index, dhe në scCSS4 - për të zvogëluar atë, foto përgjithshëm është ndryshuar. Sekuenca e elementëve në qarkullimin mbetet i njëjtë:

• id= 'scCSS1'; div ID = 'scCSS1';
• id= 'scCSS2'; div ID = 'scCSS2';
• id= 'scCSS3'; div ID = 'scCSS3';
• id= 'scCSS4'. div id = 'scCSS4'.

Duhet të theksohet se fotografia e dytë është në të vërtetë merr më shumë hapësirë se sa duket. Tabloja e tretë është e njëjtë. Për më tepër, ajo përbëhet nga dy pjesë (dy vezë) në një distancë nga njëri-tjetri.

Madhësia aktuale e rajoneve, të cilat zënë imazhet dytë dhe të tretë janë të theksuara në të verdhë dhe gri respektivisht.

Kombinimi i z-indeksi për background-color

Duhet të theksohet se pronat e CSS sfond & Z-indeksit plotësojnë njëri-tjetrin. Të gjitha elementet të nivelit bllok, dhe ndonjë tjetër, gjithmonë të zënë një sipërfaqe drejtkëndëshe formuar nga lartësia maksimale dhe gjerësi maksimale të përmbajtjes.

Duke përdorur imazhe, ju mund të bëni ndonjë element fushë formë, por rreth tij do të ketë gjithmonë një drejtkëndësh. Është një fakt që është e rëndësishme për të marrë parasysh si duhet.

Ju mund të vendosni tekstin në një formë rrugë të zgjedhur, por në qoftë se ju nuk e bëni, përmbajtja e merr për çdo element në një kuti drejtkëndëshe, rradhazi, pas marrjes së input.

Përdorimi pronat CSS z-index në elementin vlerës background-color cilit është transparent (një lloj i transparencës), mund të matem çdo element qark. Edhe pse në çdo rast në elementin realitet është drejtkëndëshe.

Ngjarjet dhe elementët e dukshme

Në vendet ku elementi është e bllokuar nga një tjetër element, ngjarjet ajo nuk do të funksionojë. Si një rregull i përgjithshëm, nëse pika është nga sytë, ai gjithashtu është zona disponueshmërinë.

Nëse një zhvillues dëshiron të bllokoj artikull butonin apo menu, ajo edhe mund të vendoset mbi tag mbyllje tjetër tag, ndoshta një transparent (p.sh., duke përdorur sundimin e CSS perde), por në çdo rast, të paturit e një të lartë CSS z-index.

Që ngjarjes, nga pika e përdoruesit të parë, mund të ndahet në relevante dhe nuk kanë ndonjë, atëherë e fundit (lëvizur miun, duke shtypur butonat rastit në tastierë, sinjal timer) mund të përdoret për të ndryshuar në mënyrë adekuate përmbajtjen në dritaren e shfletuesit.

Një shembull i thjeshtë: një vizitor ka lëvizur treguesin e miut mbi menu item, por nuk kanë vendosur ende për të bërë diçka. Zhvilluesi mund të sigurojë një ngjarje për të ndjekur lëvizjen e dialogut në pikën e dëshiruar (kliko - një vizitor vendos) dhe shfaqin një përmbajtje adekuate. Rregulli CSS z-indeksi është mirë të përshtatshme për rastin.

format foto

Që imazhet janë një material i rëndësishëm ndërtimi për çdo vend (bukuri, modernitetit, funksionalitetin - është e zakonshme normë e gjërave), është me rëndësi të madhe për zgjedhje formatin e imazhit.

Nga dhe të mëdha, ju mund të përdorni të gjitha varietet e formateve ekzistuese, por në aspektin e praktike dhe efektivitetit është mjaft e arsyeshme që të kufizojë * .png për imazhe statike dhe * .gif - për fotot animuar. Popular * .jpg është gjithashtu e mirë, por kjo nuk e lejon fleksibilitet për të manipuluar hapësirë ekran.

Bugs Browser dhe zhvilluesi

Jo aq shpesh rasti, kur CSS z-index nuk punon, por kjo ndodh. Kushtet e Cascading Style Sheets gjithmonë punë, dhe vëllimi i dosjes stilit shpesh arrijnë vëllime të mëdha. Kur diçka nuk shfaqet, ose thjesht nuk kanë se çfarë duhet të jetë, së pari duhet të kontrolloni kodin tuaj, pastaj të pastruar cache shfletuesit tuaj dhe provë kodin tuaj përsëri.

Interpretimit HTML dhe CSS, shfletuesi është pothuajse nuk bëjnë gabime - kjo është një aksiomë. Nëse pika e dëshiruar nuk ka, atëherë, në hartimin e CSS {pozicionin: absolute; z-indeks: 112.233; majtas: 10px; lart: 20px; } ... diçka mungon ose nuk janë regjistruar.

Gabimi më i zakonshëm - gabuar Treguar element mungon një referencë ndaj shikimit të saj në një pozitë absolute apo relative. Ndonjëherë ajo mund të punojnë për të specifikojë stilin direkt në elementin dhe nuk është stili i tij. Në rastin e fundit, kjo është një mënyrë për të dalë, por ajo është në radhë të parë duke folur për një lloj të gabimit në kod.

Style duhet të jetë në klasë apo ID stil. Duke treguar stilin në elementin duhet vetëm në raste të jashtëzakonshme.

Përdorimi jQuery.css (Z-indeksi, 123) gjithashtu mund të çojë në një gabim, nëse nuk aplikohet në klasë ose identifikues. Përveç kësaj, jQuery - një mjet të vërtetë të shquar të zhvillimit. Megjithatë, para se të aplikoni atë, të mos lënduar të mendoni: a është e mundur për të shpërndarë me të improvizuar do të thotë HTML / CSS, z-indeksi - nuk është një rregull që nuk kërkon vëmendje të menjëhershme.

Lëvizja e saktë e shtresave logjike, dhe

Perfect Faqe - sheshtë. Në çdo rast, para se të vërtetë imazhin e tre-dimensionale në larg një shkallë masive, dhe jo në këtë nevojë të veçantë. faqet e internetit moderne - kjo është një detyra përvojë e vërtetë, të vërtetë të botës. Ata vetëm duhet të punojnë mirë dhe të tregojnë një banesë imazh tre-dimensional.

Nga rruga, fenomeni i faqes ulje (faqe ulje) në formën e opsioneve "ndërtesës vend", - dëshmia më e mirë se e sheshtë formë drejtkëndëshe dhe të thatë, por tejet të saktë përmbajtja - gjithashtu e mirë dhe praktike. Por duhet theksuar se vendet e kompanive monopol mbërthyer në gjëja kryesore e tyre - fytyra e kompanisë, funksionalitetin dhe fuqinë e saj të prodhimit. Teknologjia e informacionit Monsters mendonin se faqet ulje - kjo është bizneset e vogla përballen, aksesorë, Herbalife dhe të tjera "bizhuteri."

Ashtu si ai apo jo, në fakt saktë, e ardhmja do të tregojë. Është e rëndësishme që jo vetëm ka kuptim për të pikturuar në shtresa përmbajtje, por edhe për të siguruar lëvizjen e duhur në mes tyre, në çdo variant të ndërtimit të një faqe interneti.

Excellent zgjidhje - AJAX (faqe është përditësuar sipas nevojës). Edhe zgjidhje më premtuese, kur faqja tregon se është e nevojshme në këtë pikë të dritares së shfletuesit.

Në fakt, z-index - kjo CSS thjeshtë rregull. Qëllimi i tij - për të treguar nivelin e tag mënyrë që shfletuesi mund të përcaktojë kur elementi ekran dhe cila pjesë e këtij elementi do të jetë i dukshëm. Layer dhe faqe - një nocion shumë relative, sepse ajo është problematike për të hartuar faqen dhe për të mbajtur në mend kuptimin e Rregullit të z-indeksi për shfaqje të ndryshme të përmbajtjes.

Në mënyrë tipike, një zhvillues zgjedh një numër të preferuar, dhe i jep atë për të gjithë tags në një rresht, dhe fakti që ne duhet të disi të dalë jashtë, cakton numrin e ardhshëm. I japim rëndësi për shtresat dhe nivelet e faqeve - nuk është praktika veçanërisht progresive dhe premtuese.

Megjithatë, nëse semantikë veprim z-indeksi për një dialog me të vizitorëve, është e mundur për të krijuar një efekt praktik. Ngjashëm me sa tags mund të mbivendosur mbi njëri-tjetrin, është e mundur për të vendosur një dialog (faqe vizitor) dhe të kryejë lëvizje në mes tyre. Nga kjo perspektivë, zbatimi i rregullave të CSS z-indeksit duket të jetë shumë e mundshme dhe praktike.