ਸਥਿਤੀ

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

ਆਮ ਮੁੱਲ

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

<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>