Lleoli Elfennau Gorgyffwrdd â Thaflenni Arddull Cascading
Un o'r heriau wrth ddefnyddio gosod CSS ar gyfer cynllun tudalen gwe yw y gall rhai o'ch elfennau gorgyffwrdd â phobl eraill. Mae hyn yn gweithio'n iawn os ydych am i'r elfen olaf yn yr HTML fod ar ben, ond beth os nad ydych chi neu beth os ydych chi am gael elfennau nad ydynt yn gorgyffwrdd eraill i wneud hynny ar hyn o bryd oherwydd bod y dyluniad yn galw am yr edrychiad "haenog" hwn ? Er mwyn newid y ffordd y mae elfennau'n gorgyffwrdd, mae angen i chi ddefnyddio eiddo CSS.
Os ydych chi wedi defnyddio offer graffeg yn Word a PowerPoint neu golygydd delwedd fwy cadarn fel Adobe Photoshop, yna mae'n siŵr eich bod chi wedi gweld rhywbeth fel z-mynegai ar waith. Yn y rhaglenni hyn, gallwch dynnu sylw at y gwrthrych (au) yr ydych chi wedi'u tynnu, a dewis opsiwn i elfennau penodol o'ch dogfen "Anfon yn ôl" neu "Dod â blaen". Yn Photoshop, nid oes gennych y swyddogaethau hyn, ond mae gennych chi bane "Haen" y rhaglen a gallwch drefnu lle mae elfen yn disgyn yn y gynfas trwy ail-drefnu'r haenau hyn. Yn y ddau enghraifft hon, rydych yn y bôn yn gosod mynegai z o'r gwrthrychau hynny.
Beth yw z-mynegai?
Pan fyddwch chi'n defnyddio gosod CSS i elfennau sefyllfa ar y dudalen, mae angen i chi feddwl mewn tri dimensiwn. Mae'r ddau ddimensiwn safonol: chwith / dde a phrif / gwaelod. Gelwir y mynegai i'r dde i'r dde fel y mynegai x, tra bod y top i waelod un yn y-mynegai. Dyma sut y byddech yn gosod elfennau yn llorweddol neu'n fertigol, gan ddefnyddio'r ddau mynegeion hyn.
Pan ddaw i ddylunio gwefannau, mae yna orchymyn cyfyngu'r dudalen hefyd. Gall pob elfen ar y dudalen gael ei haenu uwchben neu islaw unrhyw elfen arall. Mae'r eiddo z-mynegai yn penderfynu ble mae pob elfen yn y stack. Os x-mynegai a mynegai yw'r llinellau llorweddol a fertigol, yna z-mynegai yw dyfnder y dudalen, yn y bôn y trydydd dimensiwn.
Rwy'n hoffi meddwl am yr elfennau ar dudalen we fel darnau o bapur, a'r dudalen we ei hun fel collage. Pan fyddaf yn gosod y papur yn cael ei bennu gan leoliad, a faint ohono sy'n cael ei gwmpasu gan yr elfennau eraill yw'r z-mynegai.
Mae'r z-mynegai yn nifer, naill ai'n bositif (ee 100) neu negyddol (ee -100). Mae'r z-mynegai diofyn yn 0. Mae'r elfen gyda'r mynegai z uchaf ar ei ben, ac yna'r nesaf uchaf ac yn y blaen hyd at y mynegai z isaf. Os oes gan ddwy elfen yr un gwerth z-mynegai (neu nad yw'n cael ei ddiffinio, sy'n golygu defnyddio gwerth diofyn 0) bydd y porwr yn eu haenu yn y drefn y maent yn ymddangos yn yr HTML.
Sut i Defnyddio z-mynegai
Rhowch wahanol elfen z-mynegai i bob elfen yr ydych ei eisiau yn eich stack. Er enghraifft, os oes gennyf bum elfen wahanol:
- elfen 1 - z-mynegai o -25
- elfen 2 - z-mynegai o 82
- elfen 3 - z-mynegai heb ei osod
- elfen 4 - z-mynegai o 10
- elfen 5 - z-mynegai o -3
Byddant yn ymestyn yn y drefn ganlynol:
- elfen 2
- elfen 4
- elfen 3
- elfen 5
- elfen 1
Rwy'n argymell defnyddio gwerthoedd z-mynegai hynod wahanol i gychwyn eich elfennau. Felly, os ydych chi'n ychwanegu mwy o elfennau i'r dudalen yn ddiweddarach, mae gennych le i eu haenu heb orfod addasu gwerthoedd z-mynegai'r holl elfennau eraill. Er enghraifft:
- 100 ar gyfer fy elfen fwyaf-uchaf
- 0 ar gyfer fy elfen ganol
- -100 ar gyfer fy elfen waelod
Gallwch hefyd roi dwy elfen yr un gwerth z-mynegai. Os caiff yr elfennau hyn eu gosod, byddant yn arddangos yn y drefn y maent yn cael eu hysgrifennu yn yr HTML, gyda'r elfen olaf ar ei ben.
Un nodyn, ar gyfer elfen i ddefnyddio'r eiddo z-mynegai yn effeithiol, rhaid iddo fod yn elfen bloc lefel neu ddefnyddio arddangosfa o "bloc" neu "bloc mewn-lein" yn eich ffeil CSS.
Erthygl wreiddiol gan Jennifer Krynin. Golygwyd ar 12/09/16 gan Jeremy Girard.