CSS The z-index Property

z-index பண்பானது position வைக்கப்பட்ட உறுப்புகளின் ஸ்டேக் வரிசையைக் குறிப்பிடுகிறது.

ஸ்டேக் வரிசை எந்த உறுப்பு மற்ற உறுப்புகளுக்கு முன்னால் அல்லது பின்னால் வைக்கப்பட வேண்டும் என்பதை வரையறுக்கிறது.

உறுப்புகள் position வைக்கப்படும் போது, அவை மற்ற உறுப்புகளுடன் ஒன்று மேலொன்றாக இருக்கலாம்.

ஒரு உறுப்பு நேர்மறை அல்லது எதிர்மறை ஸ்டேக் வரிசையை (z-index) கொண்டிருக்கலாம்:

Image Behind Text Example

இது ஒரு தலைப்பு

படத்தில் z-index -1 இருப்பதால், அது உரையின் பின்னால் வைக்கப்படும்.

Example

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

📌 குறிப்பு:

z-index position வைக்கப்பட்ட உறுப்புகளில் மட்டுமே வேலை செய்கிறது (position: absolute, position: relative, position: fixed, அல்லது position: sticky) மற்றும் flex உருப்படிகளில் (display: flex உறுப்புகளின் நேரடி குழந்தைகளாக இருக்கும் உறுப்புகள்).

Stacking Order Visualization

அதிக ஸ்டேக் வரிசை கொண்ட position வைக்கப்பட்ட உறுப்பு எப்போதும் குறைந்த ஸ்டேக் வரிசை கொண்ட உறுப்புக்கு மேலே இருக்கும்.

z-index மதிப்புகளின் அடிப்படையில் ஸ்டேக்கிங் வரிசை

z-index: 1 (பின்னால்)

z-index: 2 (நடுவில்)

z-index: 3 (முன்னால்)

அதிக z-index மதிப்பு (3) கொண்ட உறுப்பு முன்னால் தோன்றுகிறது.

Example

.back {
  position: relative;
  z-index: 1;
}

.middle {
  position: absolute;
  z-index: 2;
}

.front {
  position: absolute;
  z-index: 3;
}

Without z-index

பல position வைக்கப்பட்ட உறுப்புகள் z-index குறிப்பிடாமல் ஒன்று மேலொன்றாக இருந்தால், HTML மூல குறியீட்டில் அவை வரையறுக்கப்பட்ட வரிசையில் உறுப்புகள் ரெண்டர் செய்யப்படுகின்றன.

💡 குறிப்பு:

z-index குறிப்பிடப்படாத நிலையில், HTML இல் கடைசியாக வரும் உறுப்பு மேலே தோன்றும். இது இயல்பான ஆவண ஓட்ட விதியாகும்.

Exercise

ஸ்டேக்கிங் வரிசையில் மற்ற அனைத்திற்கும் முன்னால் ஒரு உறுப்பு தோன்றும் வகையில் சரியான பண்புகள் மற்றும் மதிப்புகளை இழுத்து விடவும்.

🎯 ஸ்டேக்கிங் வரிசையில் மற்ற அனைத்திற்கும் முன்னால் ஒரு உறுப்பு தோன்றும் வகையில் சரியான பண்புகள் மற்றும் மதிப்புகளை இழுத்து விடவும்.

.box {
  : ;
  : ;
}

position

z-index

display

absolute

9999

100

relative

block

CSS Property

ஸ்டேக்கிங் வரிசை தொடர்பான CSS பண்பு:

Property	Description
z-index	உறுப்பின் ஸ்டேக் வரிசையை அமைக்கிறது

💡 முக்கிய குறிப்புகள்:

1. z-index position வைக்கப்பட்ட உறுப்புகளுக்கு மட்டுமே செயல்படுகிறது
2. அதிக z-index மதிப்பு கொண்ட உறுப்பு முன்னால் தோன்றும்
3. z-index குறிப்பிடப்படாவிட்டால், HTML வரிசையின் அடிப்படையில் ஸ்டேக்கிங் நடைபெறுகிறது
4. z-index எதிர்மறை மதிப்புகளைக் கொண்டிருக்கலாம் (பின்னால் வைக்க)
5. z-index: auto (இயல்புநிலை) தற்போதைய ஸ்டேக்கிங் கான்டெக்ஸ்ட்டைப் பின்பற்றுகிறது