Z-Index ka CSS

Ho beha lihlopha tse tlatlapuoang ka Li-Sheet Style Style

E 'ngoe ea liphephetso ha u sebelisa boemo ba CSS bakeng sa leqephe la websaete ke hore tse ling tsa likarolo tsa hau li ka feta tse ling. Sena se sebetsa hantle haeba u batla hore ntlha ea ho qetela e be ka holimo ho HTML, empa ho thoe'ng haeba u sa etse joalo kapa u ka etsa'ng haeba u batla ho ba le likarolo tseo hajoale li sa kopaneng le ba bang ho etsa joalo hobane moralo o batla hore "sheba" ? E le hore u fetole tsela eo likarolo li sebetsang ho eona u hloka ho sebelisa thepa ea CSS.

Haeba u se u sebelisitse lisebelisoa tsa litšoantšo ka Lentsoe le PowerPoint kapa mohlophisi o motle oa setšoantšo joaloka Adobe Photoshop, joale monyetla oa hore u bone ntho e kang z-index e sebetsang. Litsong tsena, o ka totobatsa ntho kapa tseo u li hulileng, 'me u khethe khetho ea ho "romela ho morao" kapa "tlisa ka pele" likarolo tse itseng tsa tokomane ea hau. Ho Photoshop, ha o na mesebetsi ena, empa o na le karolo ea "Layer" ea lenaneo 'me u ka lokisetsa moo karolo e oelang kahare ka ho hlophisa lihlopha tsena hape. Mehlala ena ka bobeli, u hlile u beha li-index tsa lintho tseo.

Ke eng e-index?

Ha u sebelisa boemo ba CSS ho beha likarolo tse leqepheng, u lokela ho nahana ka litekanyo tse tharo. Ho na le litekanyo tse peli tsa maemo: ka ho le letšehali / ka ho le letona le holimo / ka tlaase. Letsoho le letšehali le letona le tsejoa e le x-index, ha holimo ho tlase ho le leng ke index. Ke tsela eo u neng u tla beha likarolo ka holimo kapa ka tsela e tobileng, u sebelisa likarolo tsena tse peli.

Ha ho kena ho etsoang websaeteng, ho boetse ho na le taelo ea stacking ea leqephe. Ntho e 'ngoe le e' ngoe e leqepheng lena e ka roala ka holimo kapa ka tlaase ho ntho leha e le efe e 'ngoe. Sebaka sa li-index se etsa qeto ea hore na ho na le sepakapaka se seng le se seng. Haeba x-index le y-index ke mela e tobileng le e totobetseng, joale l-index ke botebo ba leqephe, ha e le hantle boemong ba boraro.

Ke rata ho nahana ka likarolo tsa leqephe la marang-rang joaloka likarolo tsa pampiri, le leqephe la websaete ka boeona e le collage. Moo ke behang pampiri ena ho khetholloa ka ho beha maemo, mme boholo ba eona bo koahetsoe ke lintlha tse ling ke z-index.

L-index ke nomoro, ebang e ntle (mohlala, 100) kapa e fosahetse (mohlala -100). Ntho e fapaneng e-index ke 0. The element le e phahameng ka ho fetisisa z-index e ka holimo, e lateloa ke e latelang phahameng ka ho fetisisa ho ea ho ea tlase z-index. Haeba likaroloana tse peli li na le ts'ebetso e lekanang ea li-index (kapa e sa hlalosoa, e bolelang hore tšebeliso ea boleng bo sa lekanyetsoang ba 0) sebapali se tla se beha ka tatellano e hlahang ho HTML.

Tsela ea ho sebelisa z-index

Fana ka ntho e 'ngoe le e' ngoe eo ue batlang kahare ea hau e nang le phapang e fapaneng ea index. Ka mohlala, haeba ke na le likarolo tse hlano tse fapaneng:

Ba tla kenngoa ka tatellano e latelang:

  1. karolo 2
  2. karolo 4
  3. karolo ea 3
  4. element 5
  5. element 1

Ke khothaletsa ho sebelisa mefuta e mengata e fapaneng ea li-index ho kenya likarolo tsa hau. Ka tsela eo, haeba o eketsa lisebelisoa tse ling leqepheng lena hamorao, o na le sebaka sa ho li kenya ntle le ho fetola litekanyetso tsa l-index tsa lisebelisoa tse ling tsohle. Ka mohlala:

O ka boela oa fana ka likarolo tse peli e le 'ngoe ea li-index. Haeba likarolo tsena li kenngoa, li tla bontša ka tatellano e ngotsoeng HTML, ka ntlha ea ho qetela holimo.

Tlhahiso e le 'ngoe, bakeng sa ntho e ka sebelisoang ka katleho mohahong oa li-index, e lokela ho ba sebopeho se senyenyane kapa se sebelise pontšo ea "thibelo" kapa "inline-block" faeleng ea hau ea CSS.

Sehlooho sa pele sa Jennifer Krynin. E hlophisitsoeng ka la 12/09/16 ke Jeremy Girard.