ދުވަހަކުވެސް ސީއެސްއެސްގައި ހުންނަ އެލިމެންޓެއްގައި z-index: 99999 ސެޓްކޮށްފައި، އެހެން އެލިމެންޓްތަކުގެ މައްޗަށް ނުނިކުމެއްޖެ ހެއްޔެވެ؟ އެހާ ބޮޑު އަގެއް، ތަފާތު ހުރިހާ އުފެއްދުންތަކެއް ސެޓްކޮށްފައިވަނީ ދަށް އަގެއްގައި ނުވަތަ އެއްގޮތަކަށްވެސް ސެޓް ނުކުރެވިފައިވާ ކަމަށް ގަބޫލުކޮށްގެން، ފަސޭހައިން އެ އުނިއިތުރު އެހެން އެއްޗެއްގެ މައްޗަށް ލޮލުން ފެންނަ ގޮތަށް ބަހައްޓަން ޖެހެއެވެ. އާންމުކޮށް ވެބްޕޭޖެއް ތަމްސީލުކުރެވެނީ ދެ ޑިމޭންޝަންގެ ޖާގައެއްގައެވެ؛ އެހެންނަމަވެސް ވަކި ސީއެސްއެސް ޕްރޮޕަޓީތަކެއް ތަޢާރަފްކޮށްގެން ފުންމިން ފޯރުކޮށްދިނުމަށްޓަކައި ޚިޔާލީ ޒެޑް-އެކްސިސް ޕްލޭންއެއް ތަޢާރަފްކުރެވެއެވެ. މި ޕްލޭން ސްކްރީނަށް ޕަރޕެންޑިކިއުލަރ ވެފައި ހުންނައިރު، އެއިން، އެއް އުފެއްދުން އަނެއް އެއްޗެއްގެ މައްޗަށް އުނިއިތުރުތަކުގެ ތަރުތީބު ޔޫޒަރަށް ވިސްނެއެވެ. ޚިޔާލީ ޒޭޑް-އެކްސިސްގެ ފަހަތުގައިވާ ޚިޔާލަކީ، ސްޓޭކްޑް އެލިމެންޓްތަކާ މެދު ޔޫޒަރުގެ ތަޞައްވުރު، އެކަން އުފައްދާ ސީއެސްއެސް ޕްރޮޕަޓީތައް ގުޅިގެން އަޅުގަނޑުމެން ކިޔާ ސްޓޭކިންގ ކޮންޓެކްސްޓް އުފެދުމެވެ. އަޅުގަނޑުމެން މިދައްކަނީ ވެބްޕޭޖެއްގައި އެލިމެންޓްތައް “ސްޓޭކް” ކުރެވޭ ގޮތާއި، ސްޓޭކިންގ އޯޑަރ ކޮންޓްރޯލް ކުރާ ކަންކަމާއި، ބޭނުންވާ ވަގުތު އެލިމެންޓްތައް “އަންސްޓޭކް” ކުރުމަށް އަމަލީ ގޮތްތަކުގެ ވާހަކައެވެ. ސްޓޭކިންގ ކޮންޓެކްސްޓްސް އާއި ބެހޭގޮތުން ތިބާގެ ވެބްޕޭޖް ޑެސްކެއްގެ ގޮތުގައި ތަޞައްވުރު ކޮށްލައްވާށެވެ. އެޗްޓީއެމްއެލް އެލިމެންޓްތައް އިތުރުކުރާއިރު، ތިބާ ކަރުދާސްކޮޅުތައް، އެއްފަހަރާ އަނެއް ކަރުދާސްކޮޅު، ޑެސްކް މަތީގައި ބަހައްޓައެވެ. އެންމެ ފަހުން ބަހައްޓާފައިވާ ކަރުދާސްކޮޅަކީ އެންމެ ފަހުން އިތުރުކުރި އެޗްޓީއެމްއެލް އެލިމެންޓާ އެއްވަރުގެ އެއްޗަކަށް ވާއިރު، އެއީ އޭގެ ކުރިމަތީގައި ބަހައްޓާފައިވާ އެހެން ހުރިހާ ކަރުދާސްތަކެއްގެ މަތީގައި އިށީނދެގެން ހުންނަ ކަރުދާހެކެވެ. މިއީ ނެސްޓް ކޮށްފައިވާ އެލިމެންޓްތަކަށް ވެސް އާންމު ޑޮކިއުމެންޓް ފްލޯ އެވެ. ޑެސްކް ޚުދު ތަމްސީލުކުރަނީ އެހެން ހުރިހާ ފޯލްޑަރެއް ހިމެނޭ އެލިމެންޓުން އުފެދިފައިވާ ރޫޓް ސްޓޭކިންގ ކޮންޓެކްސްޓެވެ. މިހާރު، ވަކި ސީއެސްއެސް ޕްރޮޕަޓީތަކެއް ކުޅެން އަންނަނީ. ޕޮޒިޝަން (ޒެޑް-އިންޑެކްސް އާއި އެކު)، އޮޕަސިޓީ، ޓްރާންސްފޯމް، އަދި ކޮންޓެއިން ފަދަ ޕްރޮޕަޓީތައް ފޯލްޑަރެއް ފަދައިން އަމަލުކުރެއެވެ. މި ފޯލްޑަރ އިން އެލިމެންޓަކާއި އޭގެ ހުރިހާ ދަރިން ނަގައި، މައިގަނޑު ސްޓޭކުން ނަގައި، ވަކި ސަބް ސްޓޭކަކަށް ގްރޫޕްކޮށް، އަޅުގަނޑުމެން ކިޔާ ސްޓޭކިންގ ކޮންޓެކްސްޓް އުފެދެއެވެ. ޕޮޒިޝަންޑް އެލިމެންޓްތަކަށް މިކަން ދިމާވަނީ އޮޓޯ ނޫން އެހެން ޒޭޑް-އިންޑެކްސް ވެލިއުއެއް ޑިކްލެއާ ކުރާއިރުގައެވެ. އޮޕަސިޓީ، ޓްރާންސްފޯމް، އަދި ފިލްޓަރ ފަދަ ޕްރޮޕަޓީތަކަށް، ވަކި އަގުތަކެއް ތަންފީޒު ކުރުމުން ސްޓޭކިންގ ކޮންޓެކްސްޓް އޮޓޮމެޓިކުން އުފެދެއެވެ.
މިކަން ވިސްނަން މަސައްކަތް ކުރާށެވެ: ކަރުދާސްކޮޅެއް (އެބަހީ، ޗައިލްޑް އެލިމެންޓެއް) ފޯލްޑަރެއްގެ ތެރޭގައި (އެބަހީ، ބެލެނިވެރިޔާގެ ސްޓޭކިންގ ކޮންޓެކްސްޓް) ހުރުމުން، ދުވަހަކުވެސް އެ ފޯލްޑަރުން ނުނިކުމެވޭނެ ނުވަތަ ތަފާތު ފޯލްޑަރެއްގައި ހުންނަ ކަރުދާސްތަކުގެ މެދުގައި ނުބެހެއްޓޭނެއެވެ. އޭގެ ޒެޑް-އިންޑެކްސް މިހާރު ރިލެވަންޓް ވެފައިވަނީ ހަމައެކަނި އޭގެ އަމިއްލަ ފޯލްޑަރުގެ ތެރޭގައެވެ.
ތިރީގައިވާ ތަސްވީރުގައި، ކަރުދާސް ބީ މިހާރު އޮތީ ފޯލްޑަރ ބީގެ ސްޓޭކިންގ ކޮންޓެކްސްޓްގެ ތެރޭގައި، އަދި އޯޑަރު ކުރެވޭނީ ހަމައެކަނި ފޯލްޑަރުގައިވާ އެހެން ކަރުދާސްތަކާއެކުގައެވެ.
ތިބާ ބޭނުންނަމަ، ތިބާގެ މޭޒުމަތީގައި ދެ ފޯލްޑަރެއް ހުރިކަން ތަޞައްވުރު ކޮށްލައްވާށެވެ:
.ފޯލްޑަރ-a { z-index: 1; } .ފޯލްޑަރ-ބީ { z-index: 2; }
މާކަޕް ތަންކޮޅެއް އަޕްޑޭޓް ކޮށްލަމާ ހިނގާށެވެ. ފޯލްޑަރ އޭ ގެ އެތެރޭގައި ހުންނަނީ ޚާއްޞަ ޞަފްޙާއެއް، z-index: 9999. ފޯލްޑަރ ބީ ގެ އެތެރޭގައި ހުންނަނީ އާދައިގެ ޞަފްޙާއެއް، z-index: 5.
.ސްޕެޝަލް-ޕޭޖް { z-index: 9999; } .ޕްލޭއިން-ޕޭޖް { z-index: 5; }
މަތީގައި އޮތީ ކޮން ޕޭޖެއް ހެއްޔެވެ؟ It’s the .plain-page in Folder B. ބްރައުޒާ އިން ޗައިލްޑް ޕޭޕަރސް އަށް އަޅާނުލާ ފުރަތަމަ ދެ ފޯލްޑަރ ސްޓޭކް ކުރެއެވެ. އެއީ ފޯލްޑަރ ބީ (z-index: 2) ފެނި، ފޯލްޑަރ އޭ (z-index: 1) ގެ މަތީގައި ބަހައްޓަނީ ދެ އެއްޗެއް އެއްއަށްވުރެ ބޮޑުކަން އަޅުގަނޑުމެންނަށް އެނގޭތީއެވެ. މީގެ އިތުރުން، z-index: 9999 އަށް ސެޓްކޮށްފައިވާ .special-page ޕޭޖް އޭގެ z-index ވީހާވެސް މަތީ އަގަށް ސެޓްކޮށްފައިވީނަމަވެސް، ސްޓޭކްގެ ތިރީގައި ހުރެއެވެ. ސްޓޭކިންގ ކޮންޓެކްސްޓްތައް ވެސް ނެސްޓް ކުރެވިދާނެ (ފޯލްޑަރތަކުގެ ތެރޭގައި ހުންނަ ފޯލްޑަރުތައް)، “ފެމިލީ ޓްރީ” އެއް އުފެއްދިދާނެއެވެ. ހަމަ މި އުސޫލު ތަންފީޒު ކުރެވޭ: ކުއްޖަކަށް ދުވަހަކުވެސް މައިންބަފައިންގެ ފޯލްޑަރުން ސަލާމަތް ނުވެވޭނެއެވެ. މިހާރު ސްޓޭކިންގ ކޮންޓެކްސްޓްތައް ގްރޫޕްކޮށް ލޭޔަރތައް ރީއޯޑަރ ކުރާ ފޯލްޑަރސް ފަދައިން ކަންތައްކުރާ ގޮތް އެނގިއްޖެއެވެ. މިއޮތީ ކަންތައް: މި ޕްރޮޕަޓީތައް ސްޓޭކިންގ ކޮންޓެކްސްޓްތައް ނުއުފެދެނީ އެތަންތަން ފެންނަ ގޮތުގެ ސަބަބުން؛ އެމީހުން އެކަން ކުރަނީ ހޫޑްގެ ދަށުގައި ބްރައުޒާ މަސައްކަތް ކުރާ ގޮތުގެ ސަބަބުންނެވެ. ޓްރާންސްފޯމް، އޮޕަސިޓީ، ފިލްޓަރ، ނުވަތަ ޕާސްޕެކްޓިވް އެޕްލައި ކުރާއިރު، ބްރައުޒާއަށް ބުނަނީ، “ހޭއި، މި އެލިމެންޓް މޫވް، ރޮޓޭޓް، ނުވަތަ ފޭޑް ވެދާނެ، އެހެންވީމަ ތައްޔާރަށް ތިބޭ!”
މި ޕްރޮޕަޓީތައް ބޭނުންކުރާއިރު، ރެންޑަރިންގ މާ ރަނގަޅަށް މެނޭޖްކުރުމަށްޓަކައި ބްރައުޒާއިން އާ ސްޓޭކިންގ ކޮންޓެކްސްޓެއް އުފައްދައެވެ. މިއީ ބްރައުޒާއަށް އެނިމޭޝަންތަކާއި، ޓްރާންސްފޯމްތަކާއި، ވިޝުއަލް އިފެކްޓްސް މިނިވަންކަމާއެކު ޙަވާލުކުރެވޭނެ ގޮތް ހެދުމުން، މި އުފެއްދުންތައް ޞަފްޙާގެ ބާކީ ބައިތަކާ މުޢާމަލާތުކުރާ ގޮތް އަލުން ހިސާބުކުރުމުގެ ބޭނުން ކުޑަވެގެންދާ ކަމެކެވެ. ބްރައުޒާއިން ބުނާ ގޮތުގައި “އަހަރެން މި ފޯލްޑަރ ވަކިން ހޭންޑްލް ކުރާނަން އެހެންވީމަ އޭގެ ތެރޭގައިވާ އެއްޗެއް ބަދަލުވާ ކޮންމެ ފަހަރަކު މުޅި ޑެސްކް ރީޝަފްލް ކުރަން ނުޖެހޭނެ.” އެކަމަކު އެބައޮތެވެނޭދެވޭ އަސަރެކެވެ. ބްރައުޒާއިން އެލިމެންޓެއް އަމިއްލަ ލޭޔަރަކަށް އުފުލާލުމުން، އޭގެ ތެރޭގައިވާ ހުރިހާ އެއްޗެއް “ފްލެޓް” ކޮށް، އާ ސްޓޭކިންގ ކޮންޓެކްސްޓެއް އުފައްދަން ޖެހެއެވެ. އެއީ ވަކިން ބެލެހެއްޓުމަށްޓަކައި ޑެސްކުން ފޯލްޑަރެއް ނަގައިގެން އުޅޭ ކަހަލަ ކަމެކެވެ؛ އެ ފޯލްޑަރުގެ ތެރޭގައިވާ ހުރިހާ އެއްޗެއް ގްރޫޕްވެ، ބްރައުޒާއިން މިހާރު ބަލަނީ ކޮން އެއްޗެއްގެ މައްޗަށް އިށީނދެގެން އިން އެއްޗެއް ނިންމުމުގައި އެއް ޔުނިޓެއްގެ ގޮތުގައެވެ. އެހެންކަމުން ޓްރާންސްފޯމް އަދި އޮޕަސިޓީ ޕްރޮޕަޓީސް އިން އެލިމެންޓްތައް ވިޝުއަލްކޮށް ސްޓޭކް ކުރާ ގޮތަށް އަސަރު ނުކުރާހެން ހީވިޔަސް، އެކަން ކުރަނީ، އަދި އެއީ ޕާފޯމަންސް އޮޕްޓިމައިޒޭޝަން އަށްޓަކައެވެ. އަދި ސީއެސްއެސްގެ އެހެން ބައެއް ޕްރޮޕަޓީތަކުން ވެސް މިފަދަ ސަބަބުތަކާހުރެ ސްޓޭކިންގ ކޮންޓެކްސްޓްތައް އުފެއްދިދާނެއެވެ. ފުންކޮށް ކޮނެލަން ބޭނުންނަމަ ފުރިހަމަ ލިސްޓެއް އެމްޑީއެން އިން ފޯރުކޮށްދެއެވެ. ފުދޭވަރަކަށް މަދު އެއްޗެހިތަކެއް ހުރިއިރު، މިއީ ނޭނގި ނަމަވެސް ނޭނގި ނަމަވެސް ސްޓޭކިންގ ކޮންޓެކްސްޓެއް އުފެއްދުމަކީ ކިހާ ފަސޭހަ ކަމެއްކަން ހާމަކޮށްދޭ ކަމެކެވެ. “އަންސްޓޭކިންގ” މައްސަލައެވެ ސްޓޭކިންގ މައްސަލަތައް ދިމާވެދާނެ އެތައް ސަބަބަކާ ހުރެ ނަމަވެސް ބައެއް ސަބަބުތަކަކީ އަނެއް ބަޔަކަށް ވުރެ އާންމު މައްސަލަތަކެކެވެ. މޯޑަލް ކޮމްޕޯނެންޓްތަކަކީ ކްލާސިކް ޕެޓަރނަކަށް ވާތީ، އެހެން ހުރިހާ އުފެއްދުންތަކެއްގެ މައްޗަށް މަތީ ފަށަލައެއްގައި ކޮމްޕޮނެންޓް “ހުޅުވުމަށް” ކޮމްޕޮނެންޓް ޓޮގްލްކޮށް، ދެން “ބަންދު” ވުމުން މަތީ ފަށަލައިން ނައްތާލަން ޖެހެއެވެ. އަޅުގަނޑަށް މާބޮޑަށް ޔަޤީން، އަޅުގަނޑުމެން އެންމެންވެސް މޮޑަލްއެއް ހުޅުވާލާފައި، ކޮންމެ ސަބަބަކާހުރެ ނަމަވެސް، އެކަން ނުފެންނަ ޙާލަތަކަށް ޖެހިއްޖެކަން. އެއީ ރަނގަޅަށް ހުޅުވިފައި ނުވާތީއެއް ނޫން، އެކަމަކު ސްޓޭކިންގ ކޮންޓެކްސްޓްގެ ތިރީ ފަށަލައެއްގައި ފެންނަން ނެތް ކަމެވެ. މިކަމުގެ ސަބަބުން “ކިހިނެއްވީ؟” ތިބާ ސެޓްކުރި ފަހުން:
.އޮވަރލޭ { . މަޤާމު: ފިކްސްޑް؛ /* ސްޓޭކިންގ ކޮންޓެކްސްޓް އުފައްދަނީ */ ޒެޑް-އިންޑެކްސް: 1؛ /* އެހެން ހުރިހާ އެއްޗެއްގެ މައްޗަށް އެލިމެންޓް ލޭޔަރެއްގެ މައްޗަށް ޖައްސަނީ */ އިންސެޓް: 0؛ ފުޅާމިން: 100%؛ އުސްމިން: 100vh؛ އޯވަރފްލޯ: ފޮރުވިފައި؛ ބެކްގްރައުންޑް-ކުލަ: #00000080؛ }
މިއީ ރަނގަޅު ގޮތަކަށް ފެންނަ ނަމަވެސް މޮޑަލް ޓްރިގަރ ހިމެނޭ ޕޭރެންޓް އެލިމެންޓަކީ z-index: 1 އަށް ވެސް ސެޓްކޮށްފައިވާ އެހެން ޕޭރެންޓް އެލިމެންޓެއްގެ ތެރޭގައިވާ ޗައިލްޑް އެލިމެންޓެއްނަމަ، އެއީ ޓެކްނިކަލީ މޮޑަލް ބެހެއްޓޭނީ މައި ފޯލްޑަރ އިން އޮއްބާލާފައިވާ ސަބްލޭޔަރ ގައެވެ. އެ ވަކި މަންޒަރާއި، އާންމުކޮށް ސްޓޭކިންގ-ކޮންޓެކްސްޓްގެ އެހެން ދެތިން ވަޅުގަނޑަކަށް ބަލާލަމާ ހިނގާށެވެ. އަޅުގަނޑަށް ހީވަނީ ނޭނގި ނަމަވެސް ސްޓޭކިންގ ކޮންޓެކްސްޓްތައް އުފެއްދުމަކީ ކިހާ ފަސޭހަ ކަމެއް ނޫން ކަމަށާއި، އެކަންކަން ގޯސްކޮށް ބެލެހެއްޓޭނެ ގޮތް ވެސް ފެންނާނެހެން. އަދި މެނޭޖްޑް ސްޓޭޓަކަށް އެނބުރި ދާނެ ގޮތް ބިނާވެފައި އޮންނަނީ ހާލަތުގެ މައްޗަށެވެ. މަންޒަރު 1: ދަ ޓްރެޕްޑް މޮޑަލް
ވަގުތުން ތިބާގެ މޮޑަލް ދަށް ފެންވަރުގެ ފަށަލައެއްގައި ތާށިވެފައި ހުރިތަން ފެނި، ބެލެނިވެރިޔާ ދެނެގަނެވޭނެއެވެ. ބްރައުޒާ އެކްސްޓެންޝަންސް އެހީތެރިވުމަށް ސްމާޓް ޑިވެލޮޕަރުން ވަނީ އެކްސްޓެންޝަންތައް ހަދާފައެވެ. މި ފަދަ ޓޫލްތަކުން “ސީއެސްއެސް ސްޓޭކިންގ ކޮންޓެކްސްޓް އިންސްޕެކްޓަރ” ކްރޯމް އެކްސްޓެންޝަން އިން ޑެވްޓޫލްސް އަށް އިތުރު ޒެޑް-އިންޑެކްސް ޓެބެއް އިތުރުކޮށް، ސްޓޭކިންގ ކޮންޓެކްސްޓެއް އުފައްދާ އެލިމެންޓްތަކާ ބެހޭ މައުލޫމާތު ދައްކާނެއެވެ.
އައިޑީއީ އެކްސްޓެންޝަންސް ޑިވެލޮޕްމަންޓްގެ ތެރޭގައި މައްސަލަތައް ވެސް ފާހަގަކުރެވޭނީ ވީއެސް ކޯޑަށް މިފަދަ އެކްސްޓެންޝަނަކުން ކަމަށާއި، މިއީ ސްޓޭކިންގ ކޮންޓެކްސްޓް މައްސަލަތައް ސީދާ އެޑިޓަރުގައި ފާހަގަކޮށްދޭ އެކްސްޓެންޝަނެކެވެ.
އަންސްޓޭކިންގ އެންޑް ރީގޭނިންގ ކޮންޓްރޯލް އަޅުގަނޑުމެންނަށް އޭގެ އަސްލު ސަބަބު ދެނެގަތުމަށްފަހު، ދެން އޮތީ އެކަމާ ކުރިމަތިލުމެވެ. މި މައްސަލަ ހައްލުކުރުމަށް ކުރެވިދާނެ ބައެއް ގޮތްތައް އެބަހުރި، އަދި އެކަންކަން ތަރުތީބުން ލިސްޓް ކުރާނަމެވެ. ކޮންމެ ފެންވަރެއްގައި ވެސް ކޮންމެ މީހަކު ވެސް ހޮވިދާނެ ނަމަވެސް؛ އެއްވެސް މީހަކަށް ޝަކުވާއެއް ނުވަތަ އަނެކަކަށް ހުރަހެއް ނުކުރެވޭނެއެވެ. އެޗްޓީއެމްއެލް ސްޓްރަކްޗަރ ބަދަލުކުރުން މިއީ އޮޕްޓިމަލް ފިކްސް ކަމަށް ބެލެވެއެވެ. ސްޓޭކިންގ ކޮންޓެކްސްޓް މައްސަލައެއް ދިމާވުމަށްޓަކައި، ތިބާގެ އެޗްޓީއެމްއެލްގެ ތެރޭގައި މަޖާ މަގާމުތަކުގައި ބައެއް އުފެއްދުންތައް ބަހައްޓާފައި ހުންނަން ޖެހެއެވެ. ޕޭޖް ރީސްޓްރަކްޗަރ ކުރުމަކީ ޑީއޯއެމް އަލުން ބައްޓަންކޮށް ސްޓޭކިންގ ކޮންޓެކްސްޓް މައްސަލަ ނައްތާލުމަށް އެހީތެރިވެދޭނެ ކަމެކެވެ. މައްސަލަ ހުރި އެލިމެންޓް ހޯދައި އެޗްޓީއެމްއެލް މާކަޕްގައިވާ ޓްރެޕިންގ އެލިމެންޓް އިން ނައްތާލާށެވެ. މިސާލަކަށް ފުރަތަމަ މަންޒަރު، “ދަ ޓްރެޕްޑް މޮޑަލް” ހައްލުކުރެވޭނީ، .modal-container ހެޑަރ އިން ބޭރަށް ގެންގޮސް، އަމިއްލައަށް
އެލިމެންޓްގައި ބަހައްޓައިގެންނެވެ.<ހެޑަރ ކްލާސް="ހެޑަރ">
ހެޑަރ
އެވެ <މައިގަނޑު ކްލާސް="ކޮންޓެންޓް">މައިގަނޑު ކޮންޓެންޓް
މި ކޮންޓެންޓްގެ ޒެޑް-އިންޑެކްސް އަކީ 2 ކަމަށާއި އަދިވެސް މޮޑަލް ކަވަރު ނުކުރާނެ ކަމަށެވެ.
އެވެ
މޯޑަލް ޓައިޓަލް
މިހާރު، އަހަރެން އެއްވެސް ކަމެއްގެ ފަހަތުގައި ނުހުރެމެވެ. އަޅުގަނޑަށް ލިބިފައިވަނީ ޑީއޯއެމް ރީސްޓްރަކްޗަރ ކުރުމުގެ ނަތީޖާއެއްގެ ގޮތުން ރަނގަޅު މަޤާމެކެވެ.
“އޮޕަން މޮޑަލް” ބަޓަންއަށް ފިތާލުމުން، މޮޑަލް ހުންނަނީ އެހެން ހުރިހާ އެއްޗެއްގެ ކުރިމަތީގައި ހުންނަން ޖެހޭ ގޮތަށެވެ. ޝޮޔޮމްބޯ ގެބްރިއަލް އަޔޮމައިޑް ލިޔުއްވާފައިވާ ޕެން ސިނަރިއޯ 1: ދަ ޓްރެޕްޑް މޮޑަލް (ސޮލިއުޝަން) [ފޯކްޑް] ބައްލަވާށެވެ. އެޖެސްޓް ދަ...ޕޭރެންޓް ސްޓޭކިންގ ކޮންޓެކްސްޓް އިން ސީއެސްއެސް އެ އެލިމެންޓަކީ ލޭއައުޓް ފަޅާނުލައި ހަރަކާތްތެރި ނުކުރެވޭނެ އެއްޗެއް ނަމަ ކިހިނެއް ވާނީ؟ މައްސަލައަށް ޙައްލު ހޯދުން ރަނގަޅު: ބެލެނިވެރިޔާ ކޮންޓެކްސްޓް ޤާއިމުކުރެއެވެ. ކޮންޓެކްސްޓް ޓްރިގަރ ކުރުމަށް ޒިންމާވާ ސީއެސްއެސް ޕްރޮޕަޓީ (ނުވަތަ ޕްރޮޕަޓީސް) ހޯދައި އެ ޕްރޮޕަޓީ ނައްތާލާށެވެ. އެއީ މަޤްޞަދެއް އޮވެ، ނައްތާނުލެވޭނަމަ، މުޅި ކޮންޓެއިނަރ އުފުލުމަށްޓަކައި، އޭގެ އެއްބަނޑު އެއްބަފާ އުފެއްދުންތަކަށްވުރެ މަތީ ޒެޑް-އިންޑެކްސް އަގެއް ބެލެނިވެރިޔާއަށް ދޭށެވެ. ޒޭޑް-އިންޑެކްސް ވެލިއު މަތިވުމުން، ބެލެނިވެރި ކޮންޓެއިނަރ މައްޗަށް ބަދަލުވެ، އޭގެ ދަރިން ފެންނަނީ ޔޫޒަރާއި ކައިރިއަށެވެ. “ދަ ސަބްމަރޖްޑް ޑްރޮޕްޑައުން” މަންޒަރުގައި އަޅުގަނޑުމެންނަށް ދަސްވި ކަންތައްތަކަށް ބަލާއިރު، އަޅުގަނޑުމެންނަށް ޑްރޮޕްޑައުން ނެވްބާއިން ބޭރަށް ނުގެންދެވޭނެ؛ އެއީ މާނައެއް ނެތް ކަމެއް. އެހެންނަމަވެސް އަޅުގަނޑުމެންނަށް .navbar ކޮންޓެއިނަރުގެ z-index ވެލިއު .content އެލިމެންޓްގެ z-index ވެލިއުއަށްވުރެ ބޮޑުކުރެވޭނެއެވެ. .ނަވްބާރ { ބެކްގްރައުންޑް: #333؛ /* ޒެޑް-އިންޑެކްސް: 1؛ */ ޒެޑް-އިންޑެކްސް: 3؛ މަޤާމު: ނިސްބަތުން؛ }
މި ބަދަލާއެކު މިހާރު އެއްވެސް މައްސަލައެއް ނެތި ކޮންޓެންޓްގެ ކުރިމަތީގައި .ޑްރޮޕްޑައުން-މެނޫ ފެންނާނެއެވެ. ޝޮޔޮމްބޯ ގެބްރިއަލް އަޔޮމައިޑް ލިޔުއްވާފައިވާ ޕެން ސިނަރިއޯ 2: ދަ ސަބްމަރޖްޑް ޑްރޮޕްޑައުން (ސޮލިއުޝަން) [ފޯކްޑް] ބައްލަވާށެވެ. ޓްރައި ޕޯޓަލްސް، އިފް ޔޫސިންގ އަ ފްރޭމްވޯކް ރިއެކްޓް ނުވަތަ ވިއު ފަދަ ފްރޭމްވޯކްތަކުގައި ޕޯޓަލް އަކީ ޑީއޯއެމްގައި ކޮމްޕޮނެންޓެއް އޭގެ އާދައިގެ ޕޭރެންޓް ހައިރާކީން ބޭރުގައި ރެންޑަރ ކުރެވޭ ފީޗާއެކެވެ. ޕޯޓަލްތަކަކީ ތިބާގެ ކޮމްޕޯނެންޓްތަކަށް ޓެލެޕޯޓޭޝަން ޑިވައިސްއެއް ފަދަ އެއްޗެކެވެ. އެމީހުން ކޮމްޕޮނެންޓެއްގެ އެޗްޓީއެމްއެލް ޑޮކިއުމަންޓްގެ ކޮންމެ ތަނެއްގައި (އާންމުކޮށް ރަނގަޅަށް document.body އަށް) ރެންޑަރ ކުރެވޭއިރު، ޕްރޮޕްސް، ސްޓޭޓް، އަދި އިވެންޓްތަކަށް ލޮޖިކަލީ އޭގެ އަސްލު ބެލެނިވެރިޔާއާ ގުޅިފައި ބެހެއްޓޭނެއެވެ. މިއީ ރެންޑަރޑް އައުޓްޕުޓް އަކުރުން އަކުރަށް ފެންނަނީ މައްސަލަ ހުރި ޕޭރެންޓް ކޮންޓެއިނަރުގެ ބޭރުގައި ކަމަށްވާތީ ސްޓޭކިންގ ކޮންޓެކްސްޓް ޓްރެޕްސް އިން ސަލާމަތްވުމަށް ފުރިހަމަ އެއްޗެކެވެ. ރިއެކްޓްޑޮމް.ކްރިއޭޓްޕޯޓަލް( <ޓޫލްޓިޕް />، ޑޮކިއުމަންޓް.ބޮޑީ );
މިއީ ތިބާގެ ޑްރޮޕްޑައުން ކޮންޓެންޓް އޭގެ ބެލެނިވެރިޔާގެ ފަހަތުގައި ފޮރުވިފައި ނުވާކަން ކަށަވަރުކޮށްދޭ ކަމެކެވެ، ބެލެނިވެރިޔާގެ އޯވަރފްލޯ: ފޮރުވިފައި ނުވަތަ ދަށު ޒޭޑް-އިންޑެކްސްއެއް ހުރި ނަމަވެސް. އަޅުގަނޑުމެން ކުރިން ބަލާލި “ދަ ކްލިޕްޑް ޓޫލްޓިޕް” މަންޒަރުގައި އަޅުގަނޑު ޕޯޓަލްއެއް ބޭނުންކޮށްގެން ޓޫލްޓިޕް އޯވަރފްލޯއިން ސަލާމަތްކުރީ: ފޮރުވިފައިވާ ކްލިޕް ޑޮކިއުމެންޓް ބޮޑީގައި ބަހައްޓައިގެން ކޮންޓެއިނަރުގެ ތެރޭގައި ޓްރިގަރގެ މަތީގައި ބަހައްޓައިގެންނެވެ. ޝޮޔޮމްބޯ ގެބްރިއަލް އަޔޮމައިޑް ލިޔުއްވާފައިވާ ޕެން ސިނަރިއޯ 3: ދަ ކްލިޕްޑް ޓޫލްޓިޕް (ސޮލިއުޝަން) [ފޯކްޑް] ބައްލަވާށެވެ. ސައިޑް އިފެކްޓްސް ނެތި ސްޓޭކިންގ ކޮންޓެކްސްޓް ތަޢާރަފްކުރުން ކުރީ ބައިގައި ބަޔާންކޮށްފައިވާ ހުރިހާ ގޮތްތަކަކީ މައްސަލަ ހުރި ސްޓޭކިންގ ކޮންޓެކްސްޓްތަކުން އުފެއްދުންތައް “އަންސްޓޭކް” ކުރުމަށް އަމާޒުކޮށްފައިވާ ގޮތްތަކެއް ނަމަވެސް، ސްޓޭކިންގ ކޮންޓެކްސްޓެއް އުފައްދަން ހަގީގަތުގައި ބޭނުންވާ ނުވަތަ ބޭނުންވާ ބައެއް ހާލަތްތައް އެބަހުއްޓެވެ. އާ ސްޓޭކިން ކޮންޓެކްސްޓެއް އުފެއްދުމަކީ ފަސޭހަ ކަމެއް ނަމަވެސް ހުރިހާ ގޮތަކުން ވެސް ސައިޑް އިފެކްޓެއް އެކުލެވިގެންވެ އެވެ. އެއީ، އައިސޮލޭޝަން ބޭނުންކުރުން ފިޔަވައި: އައިސޮލޭޓްކުރުން. އެލިމެންޓަކަށް އަމަލުކުރާއިރު، އެ އުނިއިތުރުގެ ދަރިންގެ ސްޓޭކިންގ ކޮންޓެކްސްޓް ކަނޑައެޅެނީ، އެ އުނިއިތުރުގެ ބޭރުގައިވާ އުފެއްދުންތަކުގެ ނުފޫޒު ފޯރުވުމަށްވުރެ، ކޮންމެ ކުއްޖަކަށް ނިސްބަތްކޮށް އަދި އެ ކޮންޓެކްސްޓެއްގެ ތެރޭގައި ކަމަށް ވެސް ވިދާޅުވި އެވެ. ކްލާސިކް މިސާލަކީ އެ އުނިއިތުރަށް ނެގެޓިވް އަގެއް ޙަވާލުކުރުމެވެ، މިއީ z-index: -1. ތިބާގެ އަތުގައި .ކާޑް ކޮމްޕޮނެންޓެއް ހުރި ކަމަށް ތަޞައްވުރު ކޮށްލައްވާށެވެ. ތިބާ ބޭނުންވަނީ .ކާޑުގެ ލިޔުމުގެ ފަހަތުގައި އިށީނދެގެން ނަމަވެސް ކާޑުގެ ފަހަތުގައި އިށީނދެގެން ހުންނަ ޒީނަތްތެރި ބައްޓަމެކެވެ. ކާޑުގައި ސްޓޭކިންގ ކޮންޓެކްސްޓެއް ނެތި، z-index: -1 އިން ބައްޓަން ފޮނުވަނީ ރޫޓް ސްޓޭކިންގ ކޮންޓެކްސްޓް (މުޅި ޞަފްޙާ) ގެ ތިރިއަށެވެ. މިކަމުގެ ސަބަބުން .ކާޑްގެ ހުދު ފަސްގަނޑުގެ ފަހަތުން ގެއްލިގެންދެއެވެ: ޝޮޔޮމްބޯ ގެބްރިއަލް އަޔޮމައިޑް ލިޔުއްވާފައިވާ ޕެން ނެގެޓިވް ޒެޑް-އިންޑެކްސް (މައްސަލަ) [ފޯކްޑް] ބައްލަވާށެވެ. މިކަން ހައްލުކުރުމަށްޓަކައި އަޅުގަނޑުމެން އެކަހެރިކަން އިޢުލާން ކުރަމެވެ: ބެލެނިވެރިޔާ .ކާޑުގައި އެކަހެރިކުރުން: ޝޮޔޮމްބޯ ގެބްރިއަލް އަޔޮމައިޑް ލިޔުއްވާފައިވާ ޕެން ނެގެޓިވް ޒެޑް-އިންޑެކްސް (ސޮލިއުޝަން) [ފޯކްޑް] ބައްލަވާށެވެ. މިހާރު، .ކާޑް އެލިމެންޓް ޚުދު ސްޓޭކިންގ ކޮންޓެކްސްޓަކަށް ވެގެންދެއެވެ. އޭގެ ޗައިލްޑް އެލިމެންޓް — :before pseudo-element ގައި އުފެދިފައިވާ ޑެކޯރޭޓިވް ޝޭޕް — ގައި z-index: -1 ހުންނައިރު، އެއީ ބެލެނިވެރިޔާގެ ސްޓޭކިންގ ކޮންޓެކްސްޓްގެ ވަރަށް ތިރިއަށް ދާ އެއްޗެކެވެ. އެއީ ލިޔުމުގެ ފަހަތުގައި އަދި ކާޑުގެ ބެކްގްރައުންޑްގެ މަތީގައި، ގަސްތުކުރި ގޮތަށް ފުރިހަމައަށް އިށީނދެގެން ހުންނަ އެއްޗެކެވެ. ނިންމުން ހަނދާން ކުރާށެވެ: ދެން ތިބާގެ ޒެޑް-އިންޑެކްސް ކޮންޓްރޯލުން ބޭރުގައި ހުރިހެން ހީވާ ފަހަރު، އެއީ ޓްރެޕްޑް ސްޓޭކިންގ ކޮންޓެކްސްޓެކެވެ. ރިފަރެންސްތައް
ސްޓޭކިންގ ކޮންޓެކްސްޓް (އެމްޑީއެން) ޒެޑް-އިންޑެކްސް އަދި ސްޓޭކިންގ ކޮންޓެކްސްޓްސް (web.dev) “ސީއެސްއެސްގައި އައިސޮލޭޝަން ޕްރޮޕަޓީއާއެކު އާ ސްޓޭކިންގ ކޮންޓެކްސްޓެއް އުފައްދާނެ ގޮތް”، ނަތާލީ ޕީނާ “ވަޓް ދަ ހެކް، ޒެޑް-އިންޑެކްސް؟؟”، ޖޯޝް ކޮމޯ
އިތުރަށް ކިޔުން އޮން ސްމޭޝިންގމެގް
“މެނޭޖިންގ ސީއެސްއެސް ޒެޑް-އިންޑެކްސް އިން ލާޖް ޕްރޮޖެކްޓްސް”، ސްޓީވަން ފްރީސަން “ސްޓިކީ ހެޑަރސް އެންޑް ފުލް-ހައިޓް އެލިމެންޓްސް: އެ ޓްރިކް ކޮމްބިނޭޝަން”، ފިލިޕް ބްރައުނޭން “މެނޭޖިންގ ޒެޑް-އިންޑެކްސް އިން އެ ކޮމްޕޮނެންޓް-ބޭސްޑް ވެބް އެޕްލިކޭޝަން”، ޕަވެލް ޕޮމެރަންސެވް “ދަ ޒޭޑް-އިންޑެކްސް ސީއެސްއެސް ޕްރޮޕަޓީ: އެ ކޮމްޕްރިހެންސިވް ލޫކް”، ލޫއީ ލާޒާރިސް
