in English

ਸਥਿਤੀ

ਕਿਸੇ ਤੱਤ ਦੀ ਸਥਿਤੀ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਕੌਂਫਿਗਰ ਕਰਨ ਲਈ ਇਹਨਾਂ ਸ਼ਾਰਟਹੈਂਡ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਆਮ ਮੁੱਲ

ਤਤਕਾਲ ਸਥਿਤੀ ਦੀਆਂ ਕਲਾਸਾਂ ਉਪਲਬਧ ਹਨ, ਹਾਲਾਂਕਿ ਉਹ ਜਵਾਬਦੇਹ ਨਹੀਂ ਹਨ।

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

ਸਥਿਰ ਸਿਖਰ

ਵਿਊਪੋਰਟ ਦੇ ਸਿਖਰ 'ਤੇ ਇੱਕ ਤੱਤ ਦੀ ਸਥਿਤੀ, ਕਿਨਾਰੇ ਤੋਂ ਕਿਨਾਰੇ ਤੱਕ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸਥਿਰ ਸਥਿਤੀ ਦੇ ਪ੍ਰਭਾਵ ਨੂੰ ਸਮਝਦੇ ਹੋ; ਤੁਹਾਨੂੰ ਵਾਧੂ CSS ਜੋੜਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ।

<div class="fixed-top">...</div>

ਸਥਿਰ ਥੱਲੇ

ਵਿਊਪੋਰਟ ਦੇ ਹੇਠਾਂ, ਕਿਨਾਰੇ ਤੋਂ ਕਿਨਾਰੇ ਤੱਕ ਇੱਕ ਤੱਤ ਦੀ ਸਥਿਤੀ ਰੱਖੋ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸਥਿਰ ਸਥਿਤੀ ਦੇ ਪ੍ਰਭਾਵ ਨੂੰ ਸਮਝਦੇ ਹੋ; ਤੁਹਾਨੂੰ ਵਾਧੂ CSS ਜੋੜਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ।

<div class="fixed-bottom">...</div>

ਸਟਿੱਕੀ ਸਿਖਰ

ਵਿਊਪੋਰਟ ਦੇ ਸਿਖਰ 'ਤੇ ਇੱਕ ਤੱਤ ਦੀ ਸਥਿਤੀ, ਕਿਨਾਰੇ ਤੋਂ ਕਿਨਾਰੇ ਤੱਕ, ਪਰ ਸਿਰਫ਼ ਉਦੋਂ ਹੀ ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ ਸਕ੍ਰੋਲ ਕਰਦੇ ਹੋ। .sticky-topਸਹੂਲਤ CSS's ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ position: sticky, ਜੋ ਕਿ ਸਾਰੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਿਤ ਨਹੀਂ ਹੈ।

IE11 ਅਤੇ IE10 position: stickyਦੇ ਰੂਪ ਵਿੱਚ ਰੈਂਡਰ ਹੋਣਗੇ position: relativeਇਸ ਤਰ੍ਹਾਂ, ਅਸੀਂ ਸਟਾਈਲ ਨੂੰ ਇੱਕ @supportsਪੁੱਛਗਿੱਛ ਵਿੱਚ ਲਪੇਟਦੇ ਹਾਂ, ਸਿਰਫ ਉਹਨਾਂ ਬ੍ਰਾਊਜ਼ਰਾਂ ਤੱਕ ਚਿਪਕਣ ਨੂੰ ਸੀਮਿਤ ਕਰਦੇ ਹੋਏ ਜੋ ਇਸਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਪੇਸ਼ ਕਰ ਸਕਦੇ ਹਨ।

<div class="sticky-top">...</div>