ਕੀ ਤੁਸੀਂ ਕਦੇ ਆਪਣੇ CSS ਵਿੱਚ ਇੱਕ ਤੱਤ 'ਤੇ z-index: 99999 ਸੈੱਟ ਕੀਤਾ ਹੈ, ਅਤੇ ਇਹ ਦੂਜੇ ਤੱਤਾਂ ਦੇ ਸਿਖਰ 'ਤੇ ਨਹੀਂ ਆਉਂਦਾ ਹੈ? ਇੱਕ ਮੁੱਲ ਜੋ ਵੱਡਾ ਹੈ ਉਸ ਤੱਤ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਕਿਸੇ ਹੋਰ ਚੀਜ਼ ਦੇ ਸਿਖਰ 'ਤੇ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ, ਇਹ ਮੰਨਦੇ ਹੋਏ ਕਿ ਸਾਰੇ ਵੱਖ-ਵੱਖ ਤੱਤ ਜਾਂ ਤਾਂ ਘੱਟ ਮੁੱਲ 'ਤੇ ਸੈੱਟ ਕੀਤੇ ਗਏ ਹਨ ਜਾਂ ਬਿਲਕੁਲ ਵੀ ਸੈੱਟ ਨਹੀਂ ਕੀਤੇ ਗਏ ਹਨ। ਇੱਕ ਵੈਬਪੇਜ ਆਮ ਤੌਰ 'ਤੇ ਦੋ-ਅਯਾਮੀ ਸਪੇਸ ਵਿੱਚ ਦਰਸਾਇਆ ਜਾਂਦਾ ਹੈ; ਹਾਲਾਂਕਿ, ਖਾਸ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਲਾਗੂ ਕਰਕੇ, ਡੂੰਘਾਈ ਨੂੰ ਵਿਅਕਤ ਕਰਨ ਲਈ ਇੱਕ ਕਾਲਪਨਿਕ z-ਐਕਸਿਸ ਪਲੇਨ ਪੇਸ਼ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਹ ਪਲੇਨ ਸਕ੍ਰੀਨ 'ਤੇ ਲੰਬਵਤ ਹੈ, ਅਤੇ ਇਸ ਤੋਂ, ਉਪਭੋਗਤਾ ਤੱਤਾਂ ਦੇ ਕ੍ਰਮ ਨੂੰ ਸਮਝਦਾ ਹੈ, ਇਕ ਦੂਜੇ ਦੇ ਸਿਖਰ 'ਤੇ। ਕਾਲਪਨਿਕ z-ਧੁਰੇ ਦੇ ਪਿੱਛੇ ਦਾ ਵਿਚਾਰ, ਸਟੈਕ ਕੀਤੇ ਤੱਤਾਂ ਬਾਰੇ ਉਪਭੋਗਤਾ ਦੀ ਧਾਰਨਾ, ਇਹ ਹੈ ਕਿ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜੋ ਇਸ ਨੂੰ ਬਣਾਉਂਦੀਆਂ ਹਨ, ਜਿਸਨੂੰ ਅਸੀਂ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਕਹਿੰਦੇ ਹਾਂ, ਨੂੰ ਜੋੜਦੇ ਹਨ। ਅਸੀਂ ਇਸ ਬਾਰੇ ਗੱਲ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ ਕਿ ਵੈਬਪੇਜ 'ਤੇ ਤੱਤ ਕਿਵੇਂ "ਸਟੈਕਡ" ਹੁੰਦੇ ਹਨ, ਸਟੈਕਿੰਗ ਆਰਡਰ ਨੂੰ ਕੀ ਨਿਯੰਤਰਿਤ ਕਰਦਾ ਹੈ, ਅਤੇ ਲੋੜ ਪੈਣ 'ਤੇ "ਅਨਸਟੈਕ" ਤੱਤਾਂ ਲਈ ਵਿਹਾਰਕ ਪਹੁੰਚ। ਸਟੈਕਿੰਗ ਸੰਦਰਭਾਂ ਬਾਰੇ ਆਪਣੇ ਵੈਬਪੇਜ ਨੂੰ ਇੱਕ ਡੈਸਕ ਦੇ ਰੂਪ ਵਿੱਚ ਕਲਪਨਾ ਕਰੋ। ਜਿਵੇਂ ਹੀ ਤੁਸੀਂ HTML ਤੱਤ ਜੋੜਦੇ ਹੋ, ਤੁਸੀਂ ਕਾਗਜ਼ ਦੇ ਟੁਕੜੇ, ਇੱਕ ਤੋਂ ਬਾਅਦ ਇੱਕ, ਡੈਸਕ ਉੱਤੇ ਰੱਖ ਰਹੇ ਹੋ। ਰੱਖਿਆ ਕਾਗਜ਼ ਦਾ ਆਖਰੀ ਟੁਕੜਾ ਸਭ ਤੋਂ ਹਾਲ ਹੀ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ HTML ਤੱਤ ਦੇ ਬਰਾਬਰ ਹੈ, ਅਤੇ ਇਹ ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਰੱਖੇ ਗਏ ਹੋਰ ਸਾਰੇ ਕਾਗਜ਼ਾਂ ਦੇ ਸਿਖਰ 'ਤੇ ਬੈਠਦਾ ਹੈ। ਇਹ ਆਮ ਦਸਤਾਵੇਜ਼ ਪ੍ਰਵਾਹ ਹੈ, ਇੱਥੋਂ ਤੱਕ ਕਿ ਨੇਸਟਡ ਤੱਤਾਂ ਲਈ ਵੀ। ਡੈਸਕ ਆਪਣੇ ਆਪ ਵਿੱਚ ਰੂਟ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ, ਜੋ ਕਿ ਐਲੀਮੈਂਟ ਦੁਆਰਾ ਬਣਾਇਆ ਗਿਆ ਹੈ, ਜਿਸ ਵਿੱਚ ਹੋਰ ਸਾਰੇ ਫੋਲਡਰਾਂ ਸ਼ਾਮਲ ਹਨ। ਹੁਣ, ਖਾਸ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਖੇਡ ਵਿੱਚ ਆਉਂਦੀਆਂ ਹਨ। ਪੋਜੀਸ਼ਨ (z-ਇੰਡੈਕਸ ਦੇ ਨਾਲ), ਧੁੰਦਲਾਪਨ, ਪਰਿਵਰਤਨ, ਅਤੇ ਸ਼ਾਮਿਲ) ਵਰਗੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਇੱਕ ਫੋਲਡਰ ਵਾਂਗ ਕੰਮ ਕਰਦੀਆਂ ਹਨ। ਇਹ ਫੋਲਡਰ ਇੱਕ ਤੱਤ ਅਤੇ ਇਸਦੇ ਸਾਰੇ ਬੱਚਿਆਂ ਨੂੰ ਲੈਂਦਾ ਹੈ, ਉਹਨਾਂ ਨੂੰ ਮੁੱਖ ਸਟੈਕ ਵਿੱਚੋਂ ਕੱਢਦਾ ਹੈ, ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਵੱਖਰੇ ਉਪ-ਸਟੈਕ ਵਿੱਚ ਸਮੂਹ ਬਣਾਉਂਦਾ ਹੈ, ਜਿਸ ਨੂੰ ਅਸੀਂ ਇੱਕ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਕਹਿੰਦੇ ਹਾਂ। ਸਥਿਤੀ ਵਾਲੇ ਤੱਤਾਂ ਲਈ, ਇਹ ਉਦੋਂ ਵਾਪਰਦਾ ਹੈ ਜਦੋਂ ਅਸੀਂ ਸਵੈ ਤੋਂ ਇਲਾਵਾ ਇੱਕ z-ਇੰਡੈਕਸ ਮੁੱਲ ਘੋਸ਼ਿਤ ਕਰਦੇ ਹਾਂ। ਧੁੰਦਲਾਪਨ, ਪਰਿਵਰਤਨ, ਅਤੇ ਫਿਲਟਰ ਵਰਗੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਜਦੋਂ ਖਾਸ ਮੁੱਲ ਲਾਗੂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ ਤਾਂ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਆਪਣੇ ਆਪ ਬਣ ਜਾਂਦਾ ਹੈ।
ਇਸਨੂੰ ਸਮਝਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ: ਇੱਕ ਵਾਰ ਕਾਗਜ਼ ਦਾ ਇੱਕ ਟੁਕੜਾ (ਅਰਥਾਤ, ਇੱਕ ਚਾਈਲਡ ਐਲੀਮੈਂਟ) ਇੱਕ ਫੋਲਡਰ ਦੇ ਅੰਦਰ ਹੁੰਦਾ ਹੈ (ਅਰਥਾਤ, ਮਾਤਾ-ਪਿਤਾ ਦਾ ਸਟੈਕਿੰਗ ਸੰਦਰਭ), ਇਹ ਕਦੇ ਵੀ ਉਸ ਫੋਲਡਰ ਤੋਂ ਬਾਹਰ ਨਹੀਂ ਜਾ ਸਕਦਾ ਜਾਂ ਕਿਸੇ ਵੱਖਰੇ ਫੋਲਡਰ ਵਿੱਚ ਕਾਗਜ਼ਾਂ ਦੇ ਵਿਚਕਾਰ ਨਹੀਂ ਰੱਖਿਆ ਜਾ ਸਕਦਾ। ਇਸਦਾ z-ਇੰਡੈਕਸ ਹੁਣ ਸਿਰਫ਼ ਇਸਦੇ ਆਪਣੇ ਫੋਲਡਰ ਵਿੱਚ ਹੀ ਢੁਕਵਾਂ ਹੈ।
ਹੇਠਾਂ ਦਿੱਤੀ ਤਸਵੀਰ ਵਿੱਚ, ਪੇਪਰ ਬੀ ਹੁਣ ਫੋਲਡਰ ਬੀ ਦੇ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਵਿੱਚ ਹੈ, ਅਤੇ ਫੋਲਡਰ ਵਿੱਚ ਸਿਰਫ਼ ਦੂਜੇ ਕਾਗਜ਼ਾਂ ਨਾਲ ਆਰਡਰ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
ਕਲਪਨਾ ਕਰੋ, ਜੇ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ, ਕਿ ਤੁਹਾਡੇ ਡੈਸਕ 'ਤੇ ਦੋ ਫੋਲਡਰ ਹਨ:
ਫੋਲਡਰ-a { z-ਇੰਡੈਕਸ: 1; } ਫੋਲਡਰ-ਬੀ { z-ਇੰਡੈਕਸ: 2; }
ਮਾਰਕਅੱਪ ਨੂੰ ਥੋੜਾ ਅੱਪਡੇਟ ਕਰੀਏ। ਫੋਲਡਰ ਏ ਦੇ ਅੰਦਰ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਪੰਨਾ ਹੈ, z-ਇੰਡੈਕਸ: 9999। ਫੋਲਡਰ ਬੀ ਦੇ ਅੰਦਰ ਇੱਕ ਸਾਦਾ ਪੰਨਾ ਹੈ, z-ਇੰਡੈਕਸ: 5।
.ਵਿਸ਼ੇਸ਼-ਪੰਨਾ { z-ਇੰਡੈਕਸ: 9999; } ਸਾਦਾ-ਪੰਨਾ { z-ਇੰਡੈਕਸ: 5; }
ਕਿਹੜਾ ਪੰਨਾ ਸਿਖਰ 'ਤੇ ਹੈ? ਇਹ ਫੋਲਡਰ B ਵਿੱਚ .plain-page ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਚਾਈਲਡ ਪੇਪਰਾਂ ਨੂੰ ਨਜ਼ਰਅੰਦਾਜ਼ ਕਰਦਾ ਹੈ ਅਤੇ ਪਹਿਲਾਂ ਦੋ ਫੋਲਡਰਾਂ ਨੂੰ ਸਟੈਕ ਕਰਦਾ ਹੈ। ਇਹ ਫੋਲਡਰ ਬੀ (z-ਇੰਡੈਕਸ: 2) ਨੂੰ ਵੇਖਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਫੋਲਡਰ ਏ (z-ਇੰਡੈਕਸ: 1) ਦੇ ਸਿਖਰ 'ਤੇ ਰੱਖਦਾ ਹੈ ਕਿਉਂਕਿ ਅਸੀਂ ਜਾਣਦੇ ਹਾਂ ਕਿ ਦੋ ਇੱਕ ਤੋਂ ਵੱਡੇ ਹਨ। ਇਸ ਦੌਰਾਨ, .special-page z-index: 9999 ਪੰਨਾ ਸਟੈਕ ਦੇ ਹੇਠਾਂ ਹੈ ਭਾਵੇਂ ਇਸਦਾ z-ਇੰਡੈਕਸ ਉੱਚਤਮ ਸੰਭਾਵਿਤ ਮੁੱਲ 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ। ਸਟੈਕਿੰਗ ਪ੍ਰਸੰਗਾਂ ਨੂੰ ਵੀ ਨੇਸਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ (ਫੋਲਡਰਾਂ ਦੇ ਅੰਦਰ ਫੋਲਡਰ), ਇੱਕ "ਪਰਿਵਾਰਕ ਰੁੱਖ" ਬਣਾਉਂਦੇ ਹੋਏ। ਇਹੀ ਸਿਧਾਂਤ ਲਾਗੂ ਹੁੰਦਾ ਹੈ: ਇੱਕ ਬੱਚਾ ਕਦੇ ਵੀ ਆਪਣੇ ਮਾਪਿਆਂ ਦੇ ਫੋਲਡਰ ਤੋਂ ਨਹੀਂ ਬਚ ਸਕਦਾ। ਹੁਣ ਜਦੋਂ ਤੁਸੀਂ ਇਹ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹੋ ਕਿ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਉਹਨਾਂ ਫੋਲਡਰਾਂ ਵਾਂਗ ਕਿਵੇਂ ਵਿਵਹਾਰ ਕਰਦੇ ਹਨ ਜੋ ਲੇਅਰਾਂ ਨੂੰ ਸਮੂਹ ਅਤੇ ਮੁੜ ਕ੍ਰਮਬੱਧ ਕਰਦੇ ਹਨ, ਇਹ ਪੁੱਛਣ ਯੋਗ ਹੈ: ਕੁਝ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ - ਜਿਵੇਂ ਕਿ ਪਰਿਵਰਤਨ ਅਤੇ ਧੁੰਦਲਾਪਨ - ਨਵੇਂ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਕਿਉਂ ਬਣਾਉਂਦੇ ਹਨ? ਇੱਥੇ ਗੱਲ ਇਹ ਹੈ: ਇਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਨਹੀਂ ਬਣਾਉਂਦੀਆਂ ਕਿਉਂਕਿ ਉਹ ਕਿਵੇਂ ਦਿਖਾਈ ਦਿੰਦੀਆਂ ਹਨ; ਉਹ ਅਜਿਹਾ ਇਸ ਲਈ ਕਰਦੇ ਹਨ ਕਿਉਂਕਿ ਬ੍ਰਾਊਜ਼ਰ ਹੁੱਡ ਦੇ ਹੇਠਾਂ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਪਰਿਵਰਤਨ, ਧੁੰਦਲਾਪਨ, ਫਿਲਟਰ ਜਾਂ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਲਾਗੂ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਕਹਿ ਰਹੇ ਹੋ, "ਹੇ, ਇਹ ਤੱਤ ਹਿੱਲ ਸਕਦਾ ਹੈ, ਘੁੰਮ ਸਕਦਾ ਹੈ, ਜਾਂ ਫਿੱਕਾ ਹੋ ਸਕਦਾ ਹੈ, ਇਸ ਲਈ ਤਿਆਰ ਰਹੋ!"
ਜਦੋਂ ਤੁਸੀਂ ਇਹਨਾਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਬ੍ਰਾਊਜ਼ਰ ਰੈਂਡਰਿੰਗ ਨੂੰ ਵਧੇਰੇ ਕੁਸ਼ਲਤਾ ਨਾਲ ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਲਈ ਇੱਕ ਨਵਾਂ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਬਣਾਉਂਦਾ ਹੈ। ਇਹ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਐਨੀਮੇਸ਼ਨਾਂ, ਪਰਿਵਰਤਨ ਅਤੇ ਵਿਜ਼ੂਅਲ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਸੁਤੰਤਰ ਤੌਰ 'ਤੇ ਹੈਂਡਲ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਇਹ ਮੁੜ-ਗਣਨਾ ਕਰਨ ਦੀ ਲੋੜ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ ਕਿ ਇਹ ਤੱਤ ਬਾਕੀ ਪੰਨੇ ਨਾਲ ਕਿਵੇਂ ਪਰਸਪਰ ਪ੍ਰਭਾਵ ਪਾਉਂਦੇ ਹਨ। ਇਸ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕਹਿਣ ਵਾਂਗ ਸੋਚੋ, "ਮੈਂ ਇਸ ਫੋਲਡਰ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਸੰਭਾਲਾਂਗਾ ਤਾਂ ਜੋ ਮੈਨੂੰ ਹਰ ਵਾਰ ਇਸ ਦੇ ਅੰਦਰ ਕੁਝ ਬਦਲਣ 'ਤੇ ਪੂਰੇ ਡੈਸਕ ਨੂੰ ਬਦਲਣ ਦੀ ਲੋੜ ਨਾ ਪਵੇ।" ਪਰ ਹੈਇੱਕ ਪਾਸੇ ਦਾ ਪ੍ਰਭਾਵ. ਇੱਕ ਵਾਰ ਜਦੋਂ ਬ੍ਰਾਊਜ਼ਰ ਇੱਕ ਤੱਤ ਨੂੰ ਆਪਣੀ ਪਰਤ ਵਿੱਚ ਚੁੱਕ ਲੈਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਇਸਦੇ ਅੰਦਰ ਹਰ ਚੀਜ਼ ਨੂੰ "ਚਪਟਾ" ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ, ਇੱਕ ਨਵਾਂ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਬਣਾਉਣਾ। ਇਹ ਇਸ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਸੰਭਾਲਣ ਲਈ ਡੈਸਕ ਤੋਂ ਇੱਕ ਫੋਲਡਰ ਲੈਣ ਵਰਗਾ ਹੈ; ਉਸ ਫੋਲਡਰ ਦੇ ਅੰਦਰ ਸਭ ਕੁਝ ਸਮੂਹਿਕ ਹੋ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਹੁਣ ਇਸ ਨੂੰ ਇੱਕ ਇਕਾਈ ਦੇ ਰੂਪ ਵਿੱਚ ਮੰਨਦਾ ਹੈ ਜਦੋਂ ਇਹ ਫੈਸਲਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਕਿ ਕਿਸ ਦੇ ਸਿਖਰ 'ਤੇ ਕੀ ਹੈ। ਇਸ ਲਈ ਭਾਵੇਂ ਪਰਿਵਰਤਨ ਅਤੇ ਧੁੰਦਲਾਪਣ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਉਸ ਤਰੀਕੇ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕਰਨ ਲਈ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦੀਆਂ ਜੋ ਤੱਤ ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਸਟੈਕ ਕਰਦੇ ਹਨ, ਉਹ ਕਰਦੇ ਹਨ, ਅਤੇ ਇਹ ਪ੍ਰਦਰਸ਼ਨ ਅਨੁਕੂਲਨ ਲਈ ਹੈ। ਕਈ ਹੋਰ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵੀ ਸਮਾਨ ਕਾਰਨਾਂ ਕਰਕੇ ਸਟੈਕਿੰਗ ਪ੍ਰਸੰਗ ਬਣਾ ਸਕਦੀਆਂ ਹਨ। ਜੇਕਰ ਤੁਸੀਂ ਡੂੰਘਾਈ ਨਾਲ ਖੋਦਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ MDN ਇੱਕ ਪੂਰੀ ਸੂਚੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇੱਥੇ ਬਹੁਤ ਕੁਝ ਹਨ, ਜੋ ਸਿਰਫ ਇਹ ਦਰਸਾਉਂਦੇ ਹਨ ਕਿ ਇਹ ਜਾਣੇ ਬਿਨਾਂ ਅਣਜਾਣੇ ਵਿੱਚ ਇੱਕ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਬਣਾਉਣਾ ਕਿੰਨਾ ਆਸਾਨ ਹੈ. "ਅਨਸਟੈਕਿੰਗ" ਸਮੱਸਿਆ ਸਟੈਕਿੰਗ ਮੁੱਦੇ ਕਈ ਕਾਰਨਾਂ ਕਰਕੇ ਪੈਦਾ ਹੋ ਸਕਦੇ ਹਨ, ਪਰ ਕੁਝ ਦੂਜਿਆਂ ਨਾਲੋਂ ਵਧੇਰੇ ਆਮ ਹਨ। ਮਾਡਲ ਕੰਪੋਨੈਂਟ ਇੱਕ ਕਲਾਸਿਕ ਪੈਟਰਨ ਹਨ ਕਿਉਂਕਿ ਉਹਨਾਂ ਨੂੰ ਹੋਰ ਸਾਰੇ ਤੱਤਾਂ ਦੇ ਉੱਪਰ ਇੱਕ ਸਿਖਰ ਦੀ ਪਰਤ 'ਤੇ "ਖੁੱਲ੍ਹਣ" ਲਈ ਕੰਪੋਨੈਂਟ ਨੂੰ ਟੌਗਲ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਫਿਰ ਇਸਨੂੰ "ਬੰਦ" ਹੋਣ 'ਤੇ ਉੱਪਰਲੀ ਪਰਤ ਤੋਂ ਹਟਾਉਣਾ ਹੁੰਦਾ ਹੈ। ਮੈਨੂੰ ਪੂਰਾ ਭਰੋਸਾ ਹੈ ਕਿ ਅਸੀਂ ਸਾਰੇ ਇੱਕ ਅਜਿਹੀ ਸਥਿਤੀ ਵਿੱਚ ਚਲੇ ਗਏ ਹਾਂ ਜਿੱਥੇ ਅਸੀਂ ਇੱਕ ਮਾਡਲ ਖੋਲ੍ਹਦੇ ਹਾਂ ਅਤੇ, ਕਿਸੇ ਵੀ ਕਾਰਨ ਕਰਕੇ, ਇਹ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦਾ. ਅਜਿਹਾ ਨਹੀਂ ਹੈ ਕਿ ਇਹ ਸਹੀ ਢੰਗ ਨਾਲ ਨਹੀਂ ਖੁੱਲ੍ਹਿਆ, ਪਰ ਇਹ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਦੀ ਇੱਕ ਹੇਠਲੀ ਪਰਤ ਵਿੱਚ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਤੋਂ ਬਾਹਰ ਹੈ. ਇਹ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰਨ ਲਈ ਛੱਡ ਦਿੰਦਾ ਹੈ "ਕਿਵੇਂ ਆਇਆ?" ਜਦੋਂ ਤੋਂ ਤੁਸੀਂ ਸੈੱਟ ਕੀਤਾ ਹੈ:
ਓਵਰਲੇ { ਸਥਿਤੀ: ਸਥਿਰ; /* ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਬਣਾਉਂਦਾ ਹੈ */ z-ਇੰਡੈਕਸ: 1; /* ਤੱਤ ਨੂੰ ਹਰ ਚੀਜ਼ ਦੇ ਉੱਪਰ ਇੱਕ ਲੇਅਰ 'ਤੇ ਰੱਖਦਾ ਹੈ */ ਇਨਸੈੱਟ: 0; ਚੌੜਾਈ: 100%; ਉਚਾਈ: 100vh; ਓਵਰਫਲੋ: ਲੁਕਿਆ ਹੋਇਆ; ਪਿਛੋਕੜ-ਰੰਗ: #00000080; }
ਇਹ ਸਹੀ ਜਾਪਦਾ ਹੈ, ਪਰ ਜੇਕਰ ਮਾੱਡਲ ਟਰਿੱਗਰ ਵਾਲਾ ਮੂਲ ਤੱਤ ਕਿਸੇ ਹੋਰ ਮੂਲ ਤੱਤ ਦੇ ਅੰਦਰ ਇੱਕ ਚਾਈਲਡ ਐਲੀਮੈਂਟ ਹੈ ਜੋ ਕਿ z-ਇੰਡੈਕਸ: 1 'ਤੇ ਵੀ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ, ਜੋ ਕਿ ਤਕਨੀਕੀ ਤੌਰ 'ਤੇ ਮਾਡਲ ਨੂੰ ਮੁੱਖ ਫੋਲਡਰ ਦੁਆਰਾ ਅਸਪਸ਼ਟ ਕੀਤੇ ਸਬਲੇਅਰ ਵਿੱਚ ਰੱਖਦਾ ਹੈ। ਆਉ ਉਸ ਖਾਸ ਦ੍ਰਿਸ਼ ਅਤੇ ਕੁਝ ਹੋਰ ਆਮ ਸਟੈਕਿੰਗ-ਪ੍ਰਸੰਗ ਦੀਆਂ ਕਮੀਆਂ ਨੂੰ ਵੇਖੀਏ. ਮੈਨੂੰ ਲਗਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਨਾ ਸਿਰਫ਼ ਇਹ ਦੇਖ ਸਕੋਗੇ ਕਿ ਅਣਜਾਣੇ ਵਿੱਚ ਸਟੈਕਿੰਗ ਪ੍ਰਸੰਗਾਂ ਨੂੰ ਬਣਾਉਣਾ ਕਿੰਨਾ ਆਸਾਨ ਹੈ, ਪਰ ਇਹ ਵੀ ਕਿ ਉਹਨਾਂ ਨੂੰ ਕਿਵੇਂ ਵਿਵਸਥਿਤ ਕਰਨਾ ਹੈ. ਨਾਲ ਹੀ, ਤੁਸੀਂ ਪ੍ਰਬੰਧਿਤ ਰਾਜ ਵਿੱਚ ਕਿਵੇਂ ਵਾਪਸ ਆਉਂਦੇ ਹੋ ਇਹ ਸਥਿਤੀ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਦ੍ਰਿਸ਼ 1: ਫਸਿਆ ਹੋਇਆ ਮਾਡਲ
ਤੁਸੀਂ ਤੁਰੰਤ ਆਪਣੇ ਮਾਡਲ ਨੂੰ ਨੀਵੇਂ ਪੱਧਰ ਦੀ ਪਰਤ ਵਿੱਚ ਫਸੇ ਹੋਏ ਦੇਖ ਸਕਦੇ ਹੋ ਅਤੇ ਮਾਤਾ-ਪਿਤਾ ਦੀ ਪਛਾਣ ਕਰ ਸਕਦੇ ਹੋ। ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨਾਂ ਸਮਾਰਟ ਡਿਵੈਲਪਰਾਂ ਨੇ ਮਦਦ ਲਈ ਐਕਸਟੈਂਸ਼ਨਾਂ ਬਣਾਈਆਂ ਹਨ। ਇਸ "CSS ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਨਿਰੀਖਕ" Chrome ਐਕਸਟੈਂਸ਼ਨ ਵਰਗੇ ਟੂਲ ਤੁਹਾਡੇ DevTools ਵਿੱਚ ਇੱਕ ਵਾਧੂ z-ਇੰਡੈਕਸ ਟੈਬ ਜੋੜਦੇ ਹਨ ਤਾਂ ਜੋ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਤੱਤਾਂ ਬਾਰੇ ਜਾਣਕਾਰੀ ਵਿਖਾਈ ਜਾ ਸਕੇ ਜੋ ਇੱਕ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਬਣਾਉਂਦੇ ਹਨ।
IDE ਐਕਸਟੈਂਸ਼ਨਾਂ ਤੁਸੀਂ VS ਕੋਡ ਲਈ ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਐਕਸਟੈਂਸ਼ਨ ਦੇ ਨਾਲ ਵਿਕਾਸ ਦੇ ਦੌਰਾਨ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਵੀ ਲੱਭ ਸਕਦੇ ਹੋ, ਜੋ ਤੁਹਾਡੇ ਸੰਪਾਦਕ ਵਿੱਚ ਸੰਭਾਵੀ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਮੁੱਦਿਆਂ ਨੂੰ ਸਿੱਧਾ ਉਜਾਗਰ ਕਰਦਾ ਹੈ।
ਅਨਸਟੈਕ ਕਰਨਾ ਅਤੇ ਨਿਯੰਤਰਣ ਮੁੜ ਪ੍ਰਾਪਤ ਕਰਨਾ ਜਦੋਂ ਅਸੀਂ ਮੂਲ ਕਾਰਨ ਦੀ ਪਛਾਣ ਕਰ ਲਈ ਹੈ, ਅਗਲਾ ਕਦਮ ਇਸ ਨਾਲ ਨਜਿੱਠਣਾ ਹੈ। ਇਸ ਸਮੱਸਿਆ ਨਾਲ ਨਜਿੱਠਣ ਲਈ ਤੁਸੀਂ ਕਈ ਤਰੀਕੇ ਅਪਣਾ ਸਕਦੇ ਹੋ, ਅਤੇ ਮੈਂ ਉਹਨਾਂ ਨੂੰ ਕ੍ਰਮ ਅਨੁਸਾਰ ਸੂਚੀਬੱਧ ਕਰਾਂਗਾ। ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਪੱਧਰ 'ਤੇ ਕਿਸੇ ਨੂੰ ਵੀ ਚੁਣ ਸਕਦੇ ਹੋ, ਹਾਲਾਂਕਿ; ਕੋਈ ਵੀ ਕਿਸੇ ਦੀ ਸ਼ਿਕਾਇਤ ਜਾਂ ਰੁਕਾਵਟ ਨਹੀਂ ਪਾ ਸਕਦਾ। HTML ਢਾਂਚੇ ਨੂੰ ਬਦਲੋ ਇਸ ਨੂੰ ਸਰਵੋਤਮ ਫਿਕਸ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ। ਤੁਹਾਡੇ ਲਈ ਇੱਕ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਮੁੱਦੇ ਨੂੰ ਚਲਾਉਣ ਲਈ, ਤੁਸੀਂ ਆਪਣੇ HTML ਦੇ ਅੰਦਰ ਮਜ਼ਾਕੀਆ ਸਥਿਤੀਆਂ ਵਿੱਚ ਕੁਝ ਤੱਤ ਰੱਖੇ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ. ਪੰਨੇ ਦਾ ਪੁਨਰਗਠਨ ਕਰਨਾ ਤੁਹਾਨੂੰ DOM ਨੂੰ ਮੁੜ ਆਕਾਰ ਦੇਣ ਅਤੇ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਸਮੱਸਿਆ ਨੂੰ ਖਤਮ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ। ਸਮੱਸਿਆ ਵਾਲੇ ਤੱਤ ਲੱਭੋ ਅਤੇ ਇਸਨੂੰ HTML ਮਾਰਕਅੱਪ ਵਿੱਚ ਫਸਾਉਣ ਵਾਲੇ ਤੱਤ ਤੋਂ ਹਟਾਓ। ਉਦਾਹਰਨ ਲਈ, ਅਸੀਂ .modal-ਕੰਟੇਨਰ ਨੂੰ ਸਿਰਲੇਖ ਤੋਂ ਬਾਹਰ ਲਿਜਾ ਕੇ ਅਤੇ ਇਸਨੂੰ ਆਪਣੇ ਆਪ ਹੀ
ਐਲੀਮੈਂਟ ਵਿੱਚ ਰੱਖ ਕੇ ਪਹਿਲੇ ਦ੍ਰਿਸ਼, “The Trapped Modal” ਨੂੰ ਹੱਲ ਕਰ ਸਕਦੇ ਹਾਂ।ਇਸ ਸਮਗਰੀ ਵਿੱਚ 2 ਦਾ z-ਇੰਡੈਕਸ ਹੈ ਅਤੇ ਫਿਰ ਵੀ ਮਾਡਲ ਨੂੰ ਕਵਰ ਨਹੀਂ ਕਰੇਗਾ।ਸਿਰਲੇਖ
ਮੁੱਖ ਸਮੱਗਰੀ
ਜਦੋਂ ਤੁਸੀਂ "ਓਪਨ ਮਾਡਲ" ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਦੇ ਹੋ, ਤਾਂ ਮਾਡਲ ਹਰ ਚੀਜ਼ ਦੇ ਸਾਹਮਣੇ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ ਜਿਵੇਂ ਕਿ ਇਹ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਪੈੱਨ ਦ੍ਰਿਸ਼ 1 ਦੇਖੋ: ਸ਼ੋਯੋਮਬੋ ਗੈਬਰੀਅਲ ਅਯੋਮਾਈਡ ਦੁਆਰਾ ਟ੍ਰੈਪਡ ਮਾਡਲ (ਹੱਲ) [ਕਾਂਟਾ]। ਐਡਜਸਟ ਕਰੋCSS ਵਿੱਚ ਪੇਰੈਂਟ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਜੇਕਰ ਤੱਤ ਇੱਕ ਹੈ ਤਾਂ ਤੁਸੀਂ ਖਾਕਾ ਤੋੜੇ ਬਿਨਾਂ ਨਹੀਂ ਹਿੱਲ ਸਕਦੇ ਹੋ? ਇਸ ਮੁੱਦੇ ਨੂੰ ਹੱਲ ਕਰਨਾ ਬਿਹਤਰ ਹੈ: ਮਾਪੇ ਸੰਦਰਭ ਸਥਾਪਿਤ ਕਰਦੇ ਹਨ। ਸੰਦਰਭ ਨੂੰ ਚਾਲੂ ਕਰਨ ਲਈ ਜ਼ਿੰਮੇਵਾਰ CSS ਵਿਸ਼ੇਸ਼ਤਾ (ਜਾਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ) ਲੱਭੋ ਅਤੇ ਇਸਨੂੰ ਹਟਾਓ। ਜੇਕਰ ਇਸਦਾ ਕੋਈ ਉਦੇਸ਼ ਹੈ ਅਤੇ ਇਸਨੂੰ ਹਟਾਇਆ ਨਹੀਂ ਜਾ ਸਕਦਾ ਹੈ, ਤਾਂ ਪੂਰੇ ਕੰਟੇਨਰ ਨੂੰ ਚੁੱਕਣ ਲਈ ਮਾਤਾ-ਪਿਤਾ ਨੂੰ ਉਸਦੇ ਭੈਣ-ਭਰਾ ਤੱਤਾਂ ਨਾਲੋਂ ਉੱਚਾ z-ਇੰਡੈਕਸ ਮੁੱਲ ਦਿਓ। ਉੱਚ z-ਇੰਡੈਕਸ ਮੁੱਲ ਦੇ ਨਾਲ, ਪੇਰੈਂਟ ਕੰਟੇਨਰ ਸਿਖਰ 'ਤੇ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਇਸਦੇ ਬੱਚੇ ਉਪਭੋਗਤਾ ਦੇ ਨੇੜੇ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ। ਜੋ ਅਸੀਂ "ਸਮਰਜਡ ਡ੍ਰੌਪਡਾਉਨ" ਦ੍ਰਿਸ਼ ਵਿੱਚ ਸਿੱਖਿਆ ਹੈ ਉਸਦੇ ਆਧਾਰ 'ਤੇ, ਅਸੀਂ ਡ੍ਰੌਪਡਾਉਨ ਨੂੰ ਨਵਬਾਰ ਤੋਂ ਬਾਹਰ ਨਹੀਂ ਲਿਜਾ ਸਕਦੇ; ਇਸ ਦਾ ਕੋਈ ਮਤਲਬ ਨਹੀਂ ਹੋਵੇਗਾ। ਹਾਲਾਂਕਿ, ਅਸੀਂ .navbar ਕੰਟੇਨਰ ਦੇ z-ਇੰਡੈਕਸ ਮੁੱਲ ਨੂੰ .content ਐਲੀਮੈਂਟ ਦੇ z-ਇੰਡੈਕਸ ਮੁੱਲ ਤੋਂ ਵੱਧ ਵਧਾ ਸਕਦੇ ਹਾਂ। .navbar { ਪਿਛੋਕੜ: #333; /* z-ਇੰਡੈਕਸ: 1; */ z-ਇੰਡੈਕਸ: 3; ਸਥਿਤੀ: ਰਿਸ਼ਤੇਦਾਰ; }
ਇਸ ਬਦਲਾਅ ਦੇ ਨਾਲ, .dropdown-menu ਹੁਣ ਬਿਨਾਂ ਕਿਸੇ ਮੁੱਦੇ ਦੇ ਸਮੱਗਰੀ ਦੇ ਸਾਹਮਣੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ। ਪੈੱਨ ਦ੍ਰਿਸ਼ 2 ਦੇਖੋ: ਸ਼ੋਯੋਮਬੋ ਗੈਬਰੀਅਲ ਅਯੋਮਾਈਡ ਦੁਆਰਾ ਡੁੱਬਿਆ ਡ੍ਰੌਪਡਾਉਨ (ਹੱਲ) [ਕਾਂਟਾ]। ਪੋਰਟਲ ਅਜ਼ਮਾਓ, ਜੇਕਰ ਇੱਕ ਫਰੇਮਵਰਕ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ React ਜਾਂ Vue ਵਰਗੇ ਫਰੇਮਵਰਕ ਵਿੱਚ, ਇੱਕ ਪੋਰਟਲ ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਜੋ ਤੁਹਾਨੂੰ DOM ਵਿੱਚ ਇਸਦੇ ਸਾਧਾਰਨ ਪੇਰੈਂਟ ਲੜੀ ਤੋਂ ਬਾਹਰ ਇੱਕ ਹਿੱਸੇ ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਦਿੰਦੀ ਹੈ। ਪੋਰਟਲ ਤੁਹਾਡੇ ਭਾਗਾਂ ਲਈ ਇੱਕ ਟੈਲੀਪੋਰਟੇਸ਼ਨ ਯੰਤਰ ਵਾਂਗ ਹੁੰਦੇ ਹਨ। ਉਹ ਤੁਹਾਨੂੰ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਕਿਸੇ ਵੀ ਹਿੱਸੇ ਦੇ HTML ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਦਿੰਦੇ ਹਨ (ਆਮ ਤੌਰ 'ਤੇ document.body ਵਿੱਚ) ਜਦੋਂ ਕਿ ਇਸਨੂੰ ਪ੍ਰੋਪਸ, ਸਟੇਟ, ਅਤੇ ਇਵੈਂਟਾਂ ਲਈ ਇਸਦੇ ਮੂਲ ਮਾਤਾ-ਪਿਤਾ ਨਾਲ ਤਰਕ ਨਾਲ ਕਨੈਕਟ ਕਰਦੇ ਹੋਏ। ਇਹ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਜਾਲ ਤੋਂ ਬਚਣ ਲਈ ਸੰਪੂਰਨ ਹੈ ਕਿਉਂਕਿ ਪੇਸ਼ ਕੀਤਾ ਆਉਟਪੁੱਟ ਅਸਲ ਵਿੱਚ ਸਮੱਸਿਆ ਵਾਲੇ ਪੇਰੈਂਟ ਕੰਟੇਨਰ ਤੋਂ ਬਾਹਰ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ। ReactDOM.createPortal( <ਟੂਲ ਟਿਪ />, document.body );
ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡੀ ਡ੍ਰੌਪਡਾਉਨ ਸਮੱਗਰੀ ਇਸਦੇ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਪਿੱਛੇ ਲੁਕੀ ਨਹੀਂ ਹੈ, ਭਾਵੇਂ ਮਾਤਾ ਜਾਂ ਪਿਤਾ ਕੋਲ ਓਵਰਫਲੋ: ਲੁਕਿਆ ਹੋਇਆ ਜਾਂ ਘੱਟ z-ਇੰਡੈਕਸ ਹੈ। "ਦਿ ਕਲਿਪਡ ਟੂਲਟਿਪ" ਦ੍ਰਿਸ਼ ਵਿੱਚ ਅਸੀਂ ਪਹਿਲਾਂ ਦੇਖਿਆ ਸੀ, ਮੈਂ ਟੂਲਟਿਪ ਨੂੰ ਓਵਰਫਲੋ ਤੋਂ ਬਚਾਉਣ ਲਈ ਇੱਕ ਪੋਰਟਲ ਦੀ ਵਰਤੋਂ ਕੀਤੀ: ਲੁਕਵੀਂ ਕਲਿੱਪ ਨੂੰ ਦਸਤਾਵੇਜ਼ ਦੇ ਭਾਗ ਵਿੱਚ ਰੱਖ ਕੇ ਅਤੇ ਇਸਨੂੰ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਟਰਿੱਗਰ ਦੇ ਉੱਪਰ ਰੱਖ ਕੇ। ਪੈੱਨ ਦ੍ਰਿਸ਼ 3 ਦੇਖੋ: ਸ਼ਿਓਮਬੋ ਗੈਬਰੀਅਲ ਅਯੋਮਾਈਡ ਦੁਆਰਾ ਕਲਿੱਪਡ ਟੂਲਟਿੱਪ (ਹੱਲ) [ਕਾਂਟੇ]। ਸਾਈਡ ਇਫੈਕਟਸ ਤੋਂ ਬਿਨਾਂ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਪੇਸ਼ ਕਰ ਰਿਹਾ ਹੈ ਪਿਛਲੇ ਭਾਗ ਵਿੱਚ ਦੱਸੇ ਗਏ ਸਾਰੇ ਪਹੁੰਚਾਂ ਦਾ ਉਦੇਸ਼ ਸਮੱਸਿਆ ਵਾਲੇ ਸਟੈਕਿੰਗ ਸੰਦਰਭਾਂ ਤੋਂ "ਅਨਸਟੈਕਿੰਗ" ਤੱਤਾਂ ਨੂੰ ਕਰਨਾ ਹੈ, ਪਰ ਕੁਝ ਸਥਿਤੀਆਂ ਹਨ ਜਿੱਥੇ ਤੁਹਾਨੂੰ ਅਸਲ ਵਿੱਚ ਇੱਕ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਦੀ ਲੋੜ ਹੋਵੇਗੀ ਜਾਂ ਬਣਾਉਣਾ ਚਾਹੋਗੇ। ਇੱਕ ਨਵਾਂ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਬਣਾਉਣਾ ਆਸਾਨ ਹੈ, ਪਰ ਸਾਰੇ ਪਹੁੰਚ ਇੱਕ ਮਾੜੇ ਪ੍ਰਭਾਵ ਦੇ ਨਾਲ ਆਉਂਦੇ ਹਨ. ਇਹ ਹੈ, ਆਈਸੋਲੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਤੋਂ ਇਲਾਵਾ: ਆਈਸੋਲੇਟ. ਜਦੋਂ ਕਿਸੇ ਤੱਤ 'ਤੇ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਉਸ ਤੱਤ ਦੇ ਬੱਚਿਆਂ ਦਾ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਹਰੇਕ ਬੱਚੇ ਦੇ ਅਨੁਸਾਰ ਅਤੇ ਉਸ ਸੰਦਰਭ ਦੇ ਅੰਦਰ ਨਿਰਧਾਰਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਨਾ ਕਿ ਇਸਦੇ ਬਾਹਰਲੇ ਤੱਤਾਂ ਦੁਆਰਾ ਪ੍ਰਭਾਵਿਤ ਹੋਣ ਦੀ। ਇੱਕ ਸ਼ਾਨਦਾਰ ਉਦਾਹਰਨ ਉਸ ਤੱਤ ਨੂੰ ਇੱਕ ਨਕਾਰਾਤਮਕ ਮੁੱਲ ਨਿਰਧਾਰਤ ਕਰਨਾ ਹੈ, ਜਿਵੇਂ ਕਿ z-ਇੰਡੈਕਸ: -1। ਕਲਪਨਾ ਕਰੋ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ .card ਭਾਗ ਹੈ। ਤੁਸੀਂ ਇੱਕ ਸਜਾਵਟੀ ਆਕਾਰ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ ਜੋ .card ਦੇ ਟੈਕਸਟ ਦੇ ਪਿੱਛੇ ਬੈਠਦਾ ਹੈ, ਪਰ ਕਾਰਡ ਦੇ ਬੈਕਗ੍ਰਾਉਂਡ ਦੇ ਉੱਪਰ। ਕਾਰਡ 'ਤੇ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਤੋਂ ਬਿਨਾਂ, z-ਇੰਡੈਕਸ: -1 ਰੂਟ ਸਟੈਕਿੰਗ ਸੰਦਰਭ (ਪੂਰਾ ਪੰਨਾ) ਦੇ ਹੇਠਾਂ ਆਕਾਰ ਨੂੰ ਭੇਜਦਾ ਹੈ। ਇਹ ਇਸਨੂੰ .card ਦੇ ਚਿੱਟੇ ਬੈਕਗ੍ਰਾਊਂਡ ਦੇ ਪਿੱਛੇ ਗਾਇਬ ਕਰ ਦਿੰਦਾ ਹੈ: ਸ਼ਿਓਮਬੋ ਗੈਬਰੀਅਲ ਅਯੋਮਾਈਡ ਦੁਆਰਾ ਪੈੱਨ ਨੈਗੇਟਿਵ z-ਇੰਡੈਕਸ (ਸਮੱਸਿਆ) [ਕਾਂਟੇ] ਦੇਖੋ। ਇਸ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ, ਅਸੀਂ ਅਲੱਗ-ਥਲੱਗ ਹੋਣ ਦਾ ਐਲਾਨ ਕਰਦੇ ਹਾਂ: ਮਾਤਾ-ਪਿਤਾ .card 'ਤੇ ਆਈਸੋਲਟ: ਸ਼ੋਯੋਮਬੋ ਗੈਬਰੀਅਲ ਅਯੋਮਾਈਡ ਦੁਆਰਾ ਪੈੱਨ ਨੈਗੇਟਿਵ z-ਇੰਡੈਕਸ (ਹੱਲ) [ਫੋਰਕਡ] ਦੇਖੋ। ਹੁਣ, .card ਤੱਤ ਆਪਣੇ ਆਪ ਵਿੱਚ ਇੱਕ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਬਣ ਜਾਂਦਾ ਹੈ। ਜਦੋਂ ਇਸ ਦੇ ਚਾਈਲਡ ਐਲੀਮੈਂਟ — :before pseudo-element — 'ਤੇ ਬਣਾਈ ਗਈ ਸਜਾਵਟੀ ਸ਼ਕਲ — ਦਾ z-ਇੰਡੈਕਸ: -1 ਹੁੰਦਾ ਹੈ, ਤਾਂ ਇਹ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਦੇ ਬਿਲਕੁਲ ਹੇਠਾਂ ਜਾਂਦਾ ਹੈ। ਇਹ ਟੈਕਸਟ ਦੇ ਪਿੱਛੇ ਅਤੇ ਕਾਰਡ ਦੇ ਪਿਛੋਕੜ ਦੇ ਸਿਖਰ 'ਤੇ ਬਿਲਕੁਲ ਬੈਠਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਇਰਾਦਾ ਹੈ। ਸਿੱਟਾ ਯਾਦ ਰੱਖੋ: ਅਗਲੀ ਵਾਰ ਜਦੋਂ ਤੁਹਾਡਾ z-ਇੰਡੈਕਸ ਨਿਯੰਤਰਣ ਤੋਂ ਬਾਹਰ ਜਾਪਦਾ ਹੈ, ਇਹ ਇੱਕ ਫਸਿਆ ਹੋਇਆ ਸਟੈਕਿੰਗ ਸੰਦਰਭ ਹੈ। ਹਵਾਲੇ
ਸਟੈਕਿੰਗ ਸੰਦਰਭ (MDN) Z-ਇੰਡੈਕਸ ਅਤੇ ਸਟੈਕਿੰਗ ਸੰਦਰਭ (web.dev) "CSS ਵਿੱਚ ਆਈਸੋਲੇਸ਼ਨ ਪ੍ਰਾਪਰਟੀ ਦੇ ਨਾਲ ਇੱਕ ਨਵਾਂ ਸਟੈਕਿੰਗ ਪ੍ਰਸੰਗ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ", ਨੈਟਲੀ ਪੀਨਾ “ਕੀ ਹੈਕ, ਜ਼ੈੱਡ-ਇੰਡੈਕਸ??”, ਜੋਸ਼ ਕੋਮੇਓ
SmashingMag 'ਤੇ ਹੋਰ ਪੜ੍ਹਨਾ
"ਵੱਡੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ CSS Z-ਇੰਡੈਕਸ ਦਾ ਪ੍ਰਬੰਧਨ", ਸਟੀਵਨ ਫ੍ਰੀਸਨ "ਸਟਿੱਕੀ ਹੈਡਰ ਅਤੇ ਪੂਰੀ-ਉਚਾਈ ਦੇ ਤੱਤ: ਇੱਕ ਛਲ ਸੁਮੇਲ", ਫਿਲਿਪ ਬਰੌਨੇਨ "ਇੱਕ ਕੰਪੋਨੈਂਟ-ਅਧਾਰਿਤ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਜ਼ੈੱਡ-ਇੰਡੈਕਸ ਦਾ ਪ੍ਰਬੰਧਨ", ਪਾਵੇਲ ਪੋਮਰੰਤਸੇਵ "ਜ਼ੈਡ-ਇੰਡੈਕਸ CSS ਪ੍ਰਾਪਰਟੀ: ਇੱਕ ਵਿਆਪਕ ਦਿੱਖ", ਲੁਈਸ ਲਾਜ਼ਾਰਿਸ
