Ịmepụta ihe ndị na-eme ka ọ dị elu na-eji akpụkpọ anụ
Otu n'ime ihe ịma aka ndị ahụ mgbe ị na-eji ọnọdụ CSS maka nhazi ihuenyo weebụ bụ na ụfọdụ n'ime ihe ndị dị na gị nwere ike iwepụ ndị ọzọ. Nke a na-arụ ọrụ nke ọma ma ọ bụrụ na ịchọrọ ka njedebe ikpeazụ na HTML dị n'elu, ma gịnị ma ọ bụrụ na ịnweghị ma ọ bụ ihe ọ bụrụ na ịchọrọ ịnwe ihe ndị na-adịghị emechi ndị ọzọ ka ha mee ya n'ihi na imepụta ahụ na-akpọ maka "layered" anya ? Iji gbanwee ụzọ dị iche iche na-agagharị, ịkwesịrị iji akụ nke CSS.
Ọ bụrụ na i jiri ngwá ọrụ eserese na Okwu na PowerPoint ma ọ bụ ihe nchịkọta nchịkwa siri ike dị ka Adobe Photoshop, mgbe ahụ ọ ga-enwe ike ịhụ ihe dị ka z-index na edinam. Na mmemme ndị a, ị nwere ike ịmepụta ihe (s) ndị ị dọtara, ma họrọ otu nhọrọ iji "Zipu azụ" ma ọ bụ "Weta n'ihu" ụfọdụ ihe dị na akwụkwọ gị. Na Photoshop, ịnweghị ọrụ ndị a, mana ịnwere pane "Layer" nke usoro ihe omume ahụ ma ị nwere ike ịhazi ebe ihe na-adaba na waaaji site na ịmalite ntọala ndị a. N'ihe atụ abụọ a, ị na-edozi z-index nke ihe ndị ahụ.
Kedu ihe bụ z-index?
Mgbe ị na-eji CSS ọnọdụ ịkwado ihe dị na ibe ahụ, ị ga-eche echiche na akụkụ atọ. Enwere uzo abụọ a: aka ekpe / nri na elu / ala. Ekpe aka ekpe gaa na ndetu aka nri ka a na-akpọ x-index, ebe elu ruo na ala bụ y-index. Nke a bụ otu ị ga-esi edozi ihe dị na ntanetị ma ọ bụ n'ahịrị, jiri akara abụọ a.
Mgbe a bịara na ntinye weebụ, enwerekwa usoro nhazi nke ibe. Ihe ọ bụla dị na peeji nke a nwere ike ịda n'elu ma ọ bụ n'okpuru ihe ọ bụla ọzọ. Ihe z-index na-ekpebi ebe ke nchịkọta nke ọ bụla bụ. Ọ bụrụ na x-index na y-index bụ ederede dị na ntanetị, mgbe ahụ z-index bụ omimi nke ibe ahụ, nke bụ nke atọ.
Ọ na-amasị m iche echiche banyere ihe ndị dị na ibe weebụ dịka akwụkwọ mpempe akwụkwọ, na ibe weebụ dịka mkpado. Ebe m na-etinye akwụkwọ a kpebiri site na nhazi, na ole edere ya na ihe ndị ọzọ bụ z-index.
The z-index bụ ọnụ ọgụgụ, ma dị mma (dịka 100) ma ọ bụ na-adịghị mma (eg -100). Ndaba z-index bụ 0. Ihe mmewere ya na z-index kasị elu dị n'elu, soro nke ọzọ kachasị elu ma wee ruo ala z-index. Ọ bụrụ na ihe abụọ nwere otu z-index uru (ma ọ bụ akọwaghị ya, nke pụtara na iji uru ndabara 0) ihe nchọgharị ahụ ga-edozi ha n'usoro ha na-egosi na HTML.
Otu esi eji z-index
Nye ihe ọ bụla i choro na nchịkọta gị dị iche z-index uru. Dịka ọmụmaatụ, ọ bụrụ na m nwere ihe dị iche iche dị iche iche ise:
- mmewere 1 - z-index nke -25
- nkeji 2 - z-index nke 82
- mmewere 3 - z-index bụghị setịpụrụ
- mmewere 4 - z-index nke 10
- mmewere 5 - z-index nke -3
Ha ga-agbakọ n'usoro ndị a:
- mmewere 2
- mmewere 4
- mmewere 3
- mmewere 5
- mmewere 1
Ekwadoro m iji ụkpụrụ z-index dị nnọọ iche iche iji dochie ihe ndị dị na gị. N'ụzọ dị otú a, ọ bụrụ na ị gbakwunye ihe ndị ọzọ na ibe ahụ mgbe e mesịrị, ị nwere ohere iji dozie ha na-enweghị mmezi ụkpụrụ z-index nke ihe ndị ọzọ niile. Ọmụmaatụ:
- 100 maka ihe kachasị elu m
- 0 maka mmewere m n'etiti
- -100 maka ihe omimi m
I nwekwara ike inye ihe abuo otu uru z-index. Ọ bụrụ na a kwadoro ihe ndị a, ha ga-egosipụta na iwu ha edere na HTML, na njedebe ikpeazụ n'elu.
Otu ederede, maka mmewere iji jiri z-index kpọrọ ihe n'ụzọ dị irè, ọ ghaghị ịbụ ihe mmemme ngọngọ ma ọ bụ jiri ngosipụta nke "oghere" ma ọ bụ "ntinye ederede" na faịlụ CSS gị.
Ihe mbụ nke Jennifer Krynin dere. Dere na Jeremy Girard na 12/09/16.