z-index மற்றும் stacking contexts எவ்வாறு செயல்படுகிறது?

Question

Accepted Answer

`z-index` ஒன்றுடன் ஒன்று சேர்ந்த உறுப்புகளின் **முன்னிலை-பின்னிலை** அடுக்கு வரிசையைக் கட்டுப்படுத்துகிறது — அதிக மதிப்புகள் மேலே அமர்ந்திருக்கும். ஆனால் இது **நிலைப்படுத்தப்பட்ட** உறுப்புக்களில் மட்டுமே செயல்படுகிறது, மேலும் இது **stacking context** க்குள் செயல்படுகிறது, இது z-index குறித்த பெரும்பாலான குழப்பத்தின் தோற்றம்.

```css
.modal   { position: fixed; z-index: 100; }   /* on top */
.overlay { position: fixed; z-index: 99; }    /* just below */
.content { position: relative; z-index: 1; }
```

`z-index` **புறக்கணிக்கப்படுகிறது** `position: static` (இயல்பு) இல் — உறுப்பு `relative`, `absolute`, `fixed`, அல்லது `sticky` ஆக இருக்க வேண்டும் அது பொருந்தக்கூடியது.

## Stacking contexts — பொறி

stacking context என்பது தனிமைப்படுத்தப்பட்ட "அடுக்கு". `z-index` மதிப்புகள் **ஒரே சூழலுக்குள்** போட்டியிடுகின்றன — குழந்தை **ஒருபோதும்** தனது பெற்றோர் அடுக்கு நிலையிலிருந்து தப்பிக்க முடியாது, அதன் z-index எவ்வளவு அதிகமாக இருந்தாலும்.

```css
.parent-a { position: relative; z-index: 1; }
.parent-b { position: relative; z-index: 2; }

.child-of-a { position: absolute; z-index: 9999; }
/* ❌ child-of-a STILL renders below everything in parent-b, */
/*    because parent-a (z-index 1) is entirely below parent-b (z-index 2). */
```

இது உன்னத "என்னுடைய z-index: 9999 modal இன்னும் எதற்குப் பின்னால் உள்ளது" பிழை — modal ஒரு குறைந்த அடுக்குடன் இருக்கும் பெற்றோரிற்குள் சிக்கிக் கொண்டுள்ளது.

## புதிய stacking context ஐ உருவாக்குவது

অনেক பண்புகள் அமைதியாக ஒன்றை உருவாக்குகின்றன, இது வம்சாவளிக்களை சிக்கவைக்கலாம்:

```text
- position + z-index (other than auto)
- opacity less than 1
- transform, filter, will-change
- isolation: isolate
- a flex/grid item with z-index
```

## தீர்வு

```css
/* render the modal at the document root (outside trapping parents) — "portal" */
.isolated { isolation: isolate; } /* deliberately create a context where you want one */
```

অনুশীলনে, modals/tooltips ஐ DOM இன் மேலே வழங்கவும் (React portals) அதனால் அவை குறைந்த-அடுக்கு பெற்றோரிற்குள் சிக்கிக் கொள்ளாது.

## ஏன் இது முக்கியம்

Stacking contexts மிகவும் குழப்பமான z-index பிழைகளை விளக்குகிறது: ஒரு বিশাল z-index இன்னும் இழக்கிறது, ஏனெனில் அதன் முன்னேறியவர் ஒரு குறைந்த அடுக்குடன் உள்ளனர்.

`opacity`, `transform`, மற்றும் நிலைப்படுத்தப்பட்ட z-index சூழல்களை உருவாக்குகிறது — மற்றும் குழந்தைகள் அவற்றிலிருந்து தப்பிக்க முடியாது — overlay/dropdown ஆணையிடுதல் பிழையைத் திருத்த மற்றும் உங்கள் DOM (portals) ஐ சரியாக கட்டமைக்க உங்களை அனுமதிக்கிறது.