𝗖𝗦𝗦 𝗣𝗼𝘀𝗶𝘁𝗶𝗼𝗻 𝗣𝗿𝗼𝗽𝗲𝗿𝘁𝗶𝗲𝘀
CSS position property ਇਹ ਤੈਅ ਕਰਦੀ ਹੈ ਕਿ ਇੱਕ element ਤੁਹਾਡੇ ਪੇਜ 'ਤੇ ਕਿੱਥੇ ਸਥਿਤ ਹੋਵੇਗਾ। ਉਹਨਾਂ ਨੂੰ ਹਿਲਾਉਣ ਲਈ ਤੁਸੀਂ top, right, bottom, ਅਤੇ left ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ।
ਪੋਜੀਸ਼ਨਿੰਗ ਦੀਆਂ ਪੰਜ ਮੁੱਖ ਕਿਸਮਾਂ ਹਨ।
Static ਇਹ ਡਿਫੌਲਟ ਸੈਟਿੰਗ ਹੈ। Elements ਪੇਜ ਦੇ ਆਮ ਕ੍ਰਮ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹਨ। ਇੱਥੇ top ਜਾਂ left properties ਦੀ ਵਰਤੋਂ ਕਰਨ ਨਾਲ ਕੁਝ ਨਹੀਂ ਹੁੰਦਾ।
Relative ਇਹ ਇੱਕ element ਨੂੰ ਉਸਦੇ ਅਸਲ ਸਥਾਨ ਦੇ ਅਧਾਰ 'ਤੇ ਹਿਲਾਉਂਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ top ਵਿੱਚ 20px ਜੋੜਦੇ ਹੋ, ਤਾਂ element ਹੇਠਾਂ ਵੱਲ ਖਿਸਕ ਜਾਂਦਾ ਹੈ। ਦੂਜੇ elements ਆਪਣੇ ਅਸਲ ਸਥਾਨਾਂ 'ਤੇ ਹੀ ਰਹਿੰਦੇ ਹਨ ਅਤੇ ਖਾਲੀ ਥਾਂ ਨੂੰ ਨਹੀਂ ਭਰਦੇ।
Absolute ਇਹ ਇੱਕ element ਨੂੰ ਪੇਜ ਦੇ ਆਮ ਫਲੋ (normal page flow) ਤੋਂ ਬਾਹਰ ਕੱਢ ਦਿੰਦਾ ਹੈ। ਇਹ ਆਪਣੇ ਸਭ ਤੋਂ ਨੇੜਲੇ positioned ancestor ਦੇ ਅਧਾਰ 'ਤੇ ਆਪਣੀ ਸਥਿਤੀ ਤੈਅ ਕਰਦਾ ਹੈ।
ਹੋਰ ਕਿਸਮਾਂ ਵਿੱਚ Fixed ਅਤੇ Sticky ਸ਼ਾਮਲ ਹਨ। Fixed elements ਸਕ੍ਰੋਲ ਕਰਨ 'ਤੇ ਵੀ ਇੱਕੋ ਜਗ੍ਹਾ 'ਤੇ ਰਹਿੰਦੇ ਹਨ। Sticky elements relative elements ਵਾਂਗ ਕੰਮ ਕਰਦੇ ਹਨ ਜਦੋਂ ਤੱਕ ਉਹ ਇੱਕ ਖਾਸ ਬਿੰਦੂ 'ਤੇ ਨਹੀਂ ਪਹੁੰਚਦੇ, ਉਸ ਤੋਂ ਬਾਅਦ ਉਹ fixed ਹੋ ਜਾਂਦੇ ਹਨ।
ਇਹਨਾਂ properties ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਇੱਥੇ ਲਓ।
ਸਰੋਤ: https://dev.to/kavin_loyola_660466e5ea96/css-position-properties-23o8