ਕੈਸਕੇਡਿੰਗ ਸਟਾਈਲ ਸ਼ੀਟਸ ਦੇ ਨਾਲ ਪੋਜੀਸ਼ਨਿੰਗ ਓਵਰਲੈਪਿੰਗ ਐਲੀਮੈਂਟਸ
ਵੈਬ ਪੇਜ ਲੇਆਉਟ ਲਈ CSS ਪੋਜੀਸ਼ਨਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਚੁਣੌਤੀਆਂ ਵਿੱਚੋਂ ਇੱਕ ਇਹ ਹੈ ਕਿ ਤੁਹਾਡੇ ਕੁਝ ਤੱਤ ਦੂਜਿਆਂ ਨੂੰ ਓਵਰਲੈਪ ਕਰ ਸਕਦੇ ਹਨ. ਇਹ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ ਜੇ ਤੁਸੀਂ ਸਿਖਰ ਤੇ ਹੋਣ ਲਈ ਐਚਟੀਐਮਐਲ ਦੇ ਆਖਰੀ ਤੱਤ ਨੂੰ ਚਾਹੁੰਦੇ ਹੋ, ਪਰ ਜੇ ਤੁਸੀਂ ਨਹੀਂ ਕਰਦੇ ਜਾਂ ਕੀ ਨਹੀਂ ਕਰਦੇ ਜੇ ਤੁਸੀਂ ਉਹ ਤੱਤ ਚਾਹੁੰਦੇ ਹੋ ਜੋ ਇਸ ਵੇਲੇ ਦੂਜਿਆਂ ਨੂੰ ਅਜਿਹਾ ਕਰਨ ਲਈ ਨਹੀਂ ਹੈ ਤਾਂ ਡਿਜ਼ਾਇਨ ਇਸ "ਲੈਵਲਡ" ਦਿੱਖ ਲਈ ਕਹਿੰਦਾ ਹੈ ? ਤੱਤ ਦੇ ਤਰੀਕੇ ਨੂੰ ਬਦਲਣ ਲਈ ਤੁਹਾਨੂੰ CSS ਦੀ ਜਾਇਦਾਦ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ.
ਜੇ ਤੁਸੀਂ ਵਰਡ ਅਤੇ ਪਾਵਰਪੁਆਇੰਟ ਜਾਂ ਅਡੋਬ ਫੋਟੋਸ਼ਾਪ ਵਰਗੇ ਵਧੇਰੇ ਮਜ਼ਬੂਤ ਚਿੱਤਰ ਸੰਪਾਦਕਾਂ ਵਿੱਚ ਇੱਕ ਗਰਾਫਿਕਸ ਟੂਲਸ ਵਰਤੇ ਹਨ, ਤਾਂ ਸੰਭਾਵਨਾ ਹੈ ਕਿ ਤੁਸੀਂ ਐਕਸ਼ਨ ਵਿੱਚ ਜ਼ੀ-ਇੰਡੈਕਸ ਵਾਂਗ ਕੁੱਝ ਵੇਖਿਆ ਹੈ. ਇਹਨਾਂ ਪ੍ਰੋਗਰਾਮਾਂ ਵਿੱਚ, ਤੁਸੀਂ ਉਕਤਾਖਿਤ ਹੋ ਸਕਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਉਤਪੰਨ ਕੀਤਾ ਹੈ, ਅਤੇ ਆਪਣੇ ਦਸਤਾਵੇਜ਼ ਦੇ ਕੁਝ ਤੱਤ "ਅੱਗੇ ਭੇਜੋ" ਜਾਂ "ਅੱਗੇ ਵੱਲ ਨੂੰ ਲਿਆਓ" ਦਾ ਵਿਕਲਪ ਚੁਣੋ. ਫੋਟੋਸ਼ਾਪ ਵਿੱਚ, ਤੁਹਾਡੇ ਕੋਲ ਇਹ ਫੰਕਸ਼ਨ ਨਹੀਂ ਹਨ, ਪਰ ਤੁਹਾਡੇ ਕੋਲ ਪ੍ਰੋਗਰਾਮ ਦਾ "ਲੇਅਰ" ਪੇਨ ਹੈ ਅਤੇ ਤੁਸੀਂ ਇਹ ਤਹਿ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਇਹ ਲੇਅਰਸ ਦੀ ਮੁੜ-ਕ੍ਰਮਬੱਧ ਕਰਕੇ ਇੱਕ ਐਨੀਮੈਂਟ ਕੈਨਵਸ ਵਿੱਚ ਡਿੱਗਦਾ ਹੈ. ਇਹਨਾਂ ਦੋਹਾਂ ਉਦਾਹਰਣਾਂ ਵਿੱਚ, ਤੁਸੀਂ ਲਾਜ਼ਮੀ ਤੌਰ ਤੇ ਉਹਨਾਂ ਚੀਜ਼ਾਂ ਦੇ z- ਇੰਡੈਕਸ ਦੀ ਸਥਾਪਨਾ ਕਰ ਰਹੇ ਹੋ.
Z- ਇੰਡੈਕਸ ਕੀ ਹੈ?
ਜਦੋਂ ਤੁਸੀਂ ਸਫ਼ੇ 'ਤੇ ਐਲੀਮੈਂਟਸ ਦੀ ਸਥਿਤੀ ਲਈ CSS ਪੋਜਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਤਿੰਨ ਮਾਪਾਂ ਵਿੱਚ ਸੋਚਣ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ. ਦੋ ਮਿਆਰੀ ਪੈਮਾਨੇ ਹਨ: ਖੱਬੇ / ਸੱਜੇ ਅਤੇ ਉੱਪਰ / ਥੱਲੇ ਖੱਬੇ ਤੋਂ ਸੱਜੇ ਇੰਡੈਕਸ ਨੂੰ ਐਕਸ-ਇੰਡੈਕਸ ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਜਦੋਂ ਕਿ ਉੱਪਰ ਤੋਂ ਥੱਲੇ ਇੱਕ y-index ਹੈ. ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਇਨ੍ਹਾਂ ਦੋ ਸੂਚਕਾਂਕ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਖਿਤਿਜੀ ਜਾਂ ਲੰਬੀਆਂ ਅਵਸਥਾਵਾਂ ਦੀ ਸਥਿਤੀ ਨੂੰ ਤਰਜੀਹ ਦਿੰਦੇ ਹੋ.
ਜਦੋਂ ਵੈਬ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਆਉਂਦੀ ਹੈ, ਤਾਂ ਪੰਨੇ ਦੇ ਸਟੈਕਿੰਗ ਆਰਡਰ ਵੀ ਮੌਜੂਦ ਹੁੰਦੇ ਹਨ. ਪੰਨੇ 'ਤੇ ਹਰੇਕ ਤੱਤ ਨੂੰ ਕਿਸੇ ਹੋਰ ਤੱਤ ਤੋਂ ਉੱਪਰ ਜਾਂ ਹੇਠਾਂ ਤਹਿ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ. Z- ਇੰਡੈਕਸ ਪ੍ਰਾਪਰਟੀ ਇਹ ਨਿਰਧਾਰਤ ਕਰਦੀ ਹੈ ਕਿ ਸਟੈਕ ਵਿਚ ਹਰੇਕ ਐਲੀਮੈਂਟ ਕਿੱਥੇ ਹੁੰਦਾ ਹੈ. ਜੇ ਐਕਸ-ਇੰਡੈਕਸ ਅਤੇ y- ਇੰਡੈਕਸ ਹਰੀਜੱਟਲ ਅਤੇ ਵਰਟੀਕਲ ਰੇਖਾਵਾਂ ਹਨ, ਤਾਂ ਜ਼ੀ-ਇੰਡੈਕਸ ਪੇਜ ਦੀ ਡੂੰਘਾਈ ਹੈ, ਜ਼ਰੂਰੀ ਤੌਰ ਤੇ ਤੀਜੀ ਮਾਪ.
ਮੈਂ ਇੱਕ ਪੇਜ਼ ਦੇ ਟੁਕੜੇ ਦੇ ਰੂਪ ਵਿੱਚ ਇੱਕ ਵੈੱਬਪੇਜ ਤੇ ਤੱਤ ਦੇ ਤੱਤ ਬਾਰੇ ਸੋਚਣਾ ਪਸੰਦ ਕਰਦਾ ਹਾਂ, ਅਤੇ ਇੱਕ ਪੇਂਜ ਦੇ ਰੂਪ ਵਿੱਚ ਵੈੱਬ ਪੰਨੇ . ਜਿੱਥੇ ਮੈਂ ਕਾਗਜ਼ ਰੱਖਦਾ ਹਾਂ ਉਹ ਸਥਿਤੀ ਦੁਆਰਾ ਨਿਰਧਾਰਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਇਸ ਵਿੱਚ ਹੋਰ ਬਹੁਤ ਸਾਰੇ ਹਿੱਸੇ ਸ਼ਾਮਲ ਹਨ z-index.
ਜ਼ੀ-ਇੰਡੈਕਸ ਇੱਕ ਨੰਬਰ ਹੈ, ਕੋਈ ਸਕਾਰਾਤਮਕ (ਜਿਵੇਂ 100) ਜਾਂ ਨੈਗੇਟਿਵ (ਜਿਵੇਂ -100). ਮੂਲ z- ਇੰਡੈਕਸ 0 ਹੈ. ਸਭ z- ਇੰਡੈਕਸ ਨਾਲ ਐਲੀਮੈਂਟ ਸਿਖਰ ਤੇ ਹੈ, ਅਗਲਾ ਸਭ ਤੋਂ ਉੱਚਾ ਅਤੇ ਇਸ ਤੋਂ ਬਾਅਦ ਸਭ ਤੋਂ ਘੱਟ ਜ਼ੀ-ਇੰਡੈਕਸ ਜੇ ਦੋ ਤੱਤਾਂ ਕੋਲ ਉਹੀ ਜ਼ੀ-ਇੰਡੈਕਸ ਵੈਲਯੂ ਹੈ (ਜਾਂ ਇਹ ਪਰਿਭਾਸ਼ਿਤ ਨਹੀਂ ਹੈ, ਭਾਵ ਕਿ 0 ਦਾ ਡਿਫਾਲਟ ਮੁੱਲ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ) ਤਾਂ ਬਰਾਊਜ਼ਰ ਉਹਨਾਂ ਨੂੰ HTML ਵਿੱਚ ਦਰਸਾਈ ਕ੍ਰਮ ਵਿੱਚ ਲੇਅਰ ਕਰ ਦੇਵੇਗਾ.
ਜ਼-ਇੰਡੈਕਸ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰੀਏ
ਹਰ ਇੱਕ ਐਲੀਮੈਂਟ ਨੂੰ ਆਪਣੇ ਸਟੈਕ ਵਿੱਚ ਇੱਕ ਵੱਖਰੀ ਜ਼ੀ-ਇੰਡੈਕਸ ਵੈਲਯੂ ਦਿਓ. ਉਦਾਹਰਣ ਵਜੋਂ, ਜੇ ਮੇਰੇ ਕੋਲ ਪੰਜ ਵੱਖਰੇ ਤੱਤ ਹਨ:
- ਇਕਾਈ 1 - ਜ਼ੀ-ਇੰਡੈਕਸ -25
- ਤੱਤ 2 - 82 ਦੇ z- ਇੰਡੈਕਸ
- ਤੱਤ 3 - ਜ਼ੈਡ-ਇੰਡੈਕਸ ਸੈਟ ਨਹੀਂ ਹੈ
- ਤੱਤ 4 - ਜ਼ੀ-ਇੰਡੈਕਸ 10
- ਤੱਤ 5 - z- ਇੰਡੈਕਸ ਔਫ -3
ਉਹ ਹੇਠ ਲਿਖੇ ਕ੍ਰਮ ਵਿੱਚ ਸਟੈਕ ਹੋਣਗੇ:
- ਤੱਤ 2
- ਤੱਤ 4
- ਤੱਤ 3
- ਤੱਤ 5
- ਇਕਾਈ 1
ਮੈਂ ਤੁਹਾਡੇ ਤੱਤਾਂ ਨੂੰ ਸਟੈਕ ਕਰਨ ਲਈ ਬਹੁਤ ਸਾਰੇ ਵੱਖਰੇ Z- ਇੰਡੈਕਸ ਮੁੱਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸਲਾਹ ਦਿੰਦਾ ਹਾਂ. ਇਸ ਤਰ੍ਹਾ, ਜੇਕਰ ਤੁਸੀਂ ਬਾਅਦ ਵਿੱਚ ਸਫ਼ੇ ਵਿੱਚ ਹੋਰ ਤੱਤ ਜੋੜਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਡੇ ਕੋਲ ਹੋਰ ਸਾਰੇ ਤੱਤ ਦੇ z- ਇੰਡੈਕਸ ਵੈਲਯੂਆਂ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਦੇ ਬਿਨਾਂ ਉਹਨਾਂ ਨੂੰ ਲੇਅਰ ਕਰਨ ਲਈ ਕਮਰਾ ਹੈ. ਉਦਾਹਰਣ ਲਈ:
- ਮੇਰੇ ਚੋਟੀ ਦੇ ਸਭ ਤੱਤ ਲਈ 100
- ਮੇਰੇ ਮੱਧ ਤੱਤ ਲਈ 0
- ਮੇਰੇ ਤਲ ਤੱਤ ਲਈ -100
ਤੁਸੀਂ ਦੋ ਐਲੀਮੈਂਟਸ ਨੂੰ ਇੱਕੋ ਜ਼ੀ-ਇੰਡੈਕਸ ਵੈਲਯੂ ਵੀ ਦੇ ਸਕਦੇ ਹੋ. ਜੇ ਇਹ ਤੱਤ ਸਟੈਕ ਕੀਤੇ ਹੋਏ ਹਨ, ਤਾਂ ਉਹ ਕ੍ਰਮ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਣਗੇ ਜੋ ਉਨ੍ਹਾਂ ਨੂੰ ਐਚਟੀਐਮਐਲ ਵਿੱਚ ਲਿਖਿਆ ਗਿਆ ਹੈ, ਜਿਸਦਾ ਉੱਪਰਲਾ ਅਖੀਰਲਾ ਭਾਗ ਹੈ.
ਇੱਕ ਨੋਟ, ਇੱਕ ਤੱਤ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ z- ਇੰਡੈਕਸ ਪ੍ਰਾਪਰਟੀ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ, ਇਹ ਇੱਕ ਬਲਾਕ ਪੱਧਰ ਦਾ ਤੱਤ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਜਾਂ ਤੁਹਾਡੇ CSS ਫਾਇਲ ਵਿੱਚ "ਬਲਾਕ" ਜਾਂ "ਇਨ-ਲਾਈਨ-ਬਲਾਕ" ਦੀ ਵਰਤੋਂ ਨੂੰ ਵਰਤਣਾ ਚਾਹੀਦਾ ਹੈ.
ਜੈਨੀਫਰ ਕ੍ਰਿਨਿਨ ਦੁਆਰਾ ਮੂਲ ਲੇਖ. 12/09/16 ਨੂੰ ਜੈਰੀਮੀ ਗਿਰਾਰਡ ਦੁਆਰਾ ਸੰਪਾਦਿਤ