ਸਥਿਤੀ
ਕਿਸੇ ਤੱਤ ਦੀ ਸਥਿਤੀ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਕੌਂਫਿਗਰ ਕਰਨ ਲਈ ਇਹਨਾਂ ਸ਼ਾਰਟਹੈਂਡ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਆਮ ਮੁੱਲ
ਤਤਕਾਲ ਸਥਿਤੀ ਦੀਆਂ ਕਲਾਸਾਂ ਉਪਲਬਧ ਹਨ, ਹਾਲਾਂਕਿ ਉਹ ਜਵਾਬਦੇਹ ਨਹੀਂ ਹਨ।
<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>