Kugadzirisa Zvinhu Zvokuputira Zvinhu neCascading Style Sheets
Imwe yezvinetso pakushandisa CSS kuronga kwewebhu peji kurongwa ndechokuti zvimwe zvezvinhu zvako zvinogona kuwira kune vamwe. Izvi zvinoshanda zvakanaka kana iwe uchida chikamu chekupedzisira mu HTML kuti chive pamusoro, asi zvakadini kana iwe usingaiti kana chii kana iwe uchida kuva nezvinhu izvo zvisiri izvo zvisingasviki vamwe kuti vaite kudaro nokuti chigadziro chinoda kuti ichi "chizere" chionekwe ? Kuti uchinje nzira iyo michina inopinda iwe unoda kushandisa pfuma yeCSS.
Kana iwe wakashandisa zvishandiso zvishandiso muShoko uye PowerPoint kana kuti mharidzo yakasimba yemifananidzo seAdobe Photoshop, zvino mukana wakaona chimwe chinhu chakafanana ne-index mukuita. Mune mapurogiramu aya, unogona kusimbisa chinhu (cha) chawakatora, uye sarudza chisarudzo chekuti "Tumira kumushure" kana kuti "Uya nechemberi" zvimwe zvikamu zvebhuku rako. Mune Photoshop, iwe hauna mabasa aya, asi une "Layer" pane yepurogiramu uye iwe unogona kuronga apo chimwe chinhu chinowira mumutsara nekugadzirisazve zvidimbu izvi. Mune miviri mienzaniso iyi, iwe uri kunyanya kuisa z-index yezvinhu izvozvo.
Chii z-index?
Paunenge uchishandisa CSS nzvimbo yekuisa zvigadziri pane peji, unofunge kufunga mumatatu matatu. Iko kune miviri miviri yakaenzana: kuruboshwe / kurudyi uye kumusoro / pasi. Kuruboshwe kurudyi kurondedzera kunozivikanwa se x-index, nepo kumusoro kusvika pasi imwe y y-index. Iyi ndiyo nzira iwe waizoisa mamiriro ezvinhu zvakananga kana kutenderera, uchishandisa aya mairi maviri.
Apo in inouya kune web design, panewo zvakare kuiswa kwekugadzirisa kwepeji. Chinhu chimwe nechimwe pane peji chinogona kuvezwa pamusoro kana pasi pemumwe chero chinhu. I-z-index nzvimbo inotarisa kuti pane chii chiripo chimwe nechimwe chinhu. Kana x-index uye y-index ndiyo yakananga uye yakananga mitambo, ipapo z-index ndiyo yakadzika peji, kunyanya 3rd dimension.
Ndinoda kufunga nezvemashoko pane webpage sezvidimbu zvepapepa, uye peji yewebhu pachayo sejijiji. Apo pandinoisa pepa racho rinotsanangurwa nekuisa, uye kuti yakawanda sei yakafukidzwa nezvimwe zvinhu zviri z-index.
Z-index ndiyo nhamba, ingave yakanaka (p. 100) kana yakaipa (semu -100). Izvo z-z-index ndeyekuti. The element with the highest z-index is above, followed by the next highest and so down to the lowest z-index. Kana zvikamu zviviri zvakafanana z-index kukosha (kana zvisingatsanangurwi, zvinoreva kushandiswa kweiyo kusakosha kwenhamba ye 0) musikana wacho achavaisa mumutemo wavanowanikwa mu HTML.
Nzira yekushandisa z-index
Ipa chimwe nechimwe chinhu chaunoda muchitsiko chako chakasiyana z-index kukosha. Somuenzaniso, kana ndine zvinhu zvishanu zvakasiyana:
- chikamu 1 - z-index ye -25
- chikamu 2 - z-index ye 82
- chikamu 3 - z-index isati yaiswa
- chikamu 4 - z-index yegumi
- chikamu 5 - z-index ye -3
Vachapindira nenzira inotevera:
- element 2
- chikamu 4
- chikamu 3
- chikamu 5
- chikamu 1
Ndinokurudzira kushandisa zvakasiyana-siyana z-nheyo dzekunyorera kuti uchengetedze zvinhu zvako. Nenzira iyo, kana ukawedzera zvimwe zvikamu ku peji gare gare, une nzvimbo yekuisa mukati mazvo usina kuchinja ma z-index maonero ezvimwe zvinhu zvose. Semuyenzaniso:
- 100 nokuda kwangu-chinhu chikuru
- 0 nokuda kwemukati wangu
- -100 yechinhu changu chepasi
Iwe unogonawo kupa zvinhu zviviri zvakafanana z-index value. Kana izvi zvikamu zvakakonzerwa, zvicharatidza mune zvakarongeka zvakanyorwa mu HTML, pamwe nechokupedzisira pane.
Chimwe chiziviso, chechinhu chinoshandiswa kushandisa zvakakodzera z-index pfuma, inofanira kunge iri chikwata chebato chepamusoro kana kushandisa chiratidzo che "block" kana "inline-block" mune CSS yako file.
Nyaya yekutanga naJennifer Krynin. Yakagadziriswa musi wa12/09/16 naJeremy Girard.