position ਨਿਯੰਤਰਿਤ ਕਰਦਾ ਹੈ ਕਿ ਇੱਕ ਤੱਤ ਕਿਵੇਂ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਕੀ offset properties (top/right/bottom/left) ਲਾਗੂ ਹੁੰਦੀਆਂ ਹਨ।
css
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute ਇੱਕ ਤੱਤ ਨੂੰ ਇਸ ਦੇ ਸਭ ਤੋਂ ਨਜ਼ਦੀਕ ancestor ਜੋ positioned ਹੈ (static ਤੋਂ ਇਲਾਵਾ ਕੁਝ ਵੀ) ਦੇ ਸਾਪੇਖ ਰਖਦਾ ਹੈ। ਤੁਸੀਂ ਇਸ ਨੂੰ ਹਵਾਲਾ ਬਿੰਦੂ ਬਣਾਉਣ ਲਈ parent ਤੇ position: relative ਸੈਟ ਕਰਦੇ ਹੋ:
.card {
position: relative; /* becomes the positioning context */
}
.badge {
position: absolute; /* positioned relative to .card */
top: 8px;
right: 8px; /* pins the badge to the card's top-right corner */
}
ਇਹ relative-parent / absolute-child ਪੈਟਰਨ ਹਰ ਥਾਂ ਹੈ: badges, dropdowns, tooltips, close buttons।
.navbar { position: fixed; top: 0; } /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
top: 0) ਤੱਕ ਪਹੁੰਚਣ ਤੱਕ relative ਵਾਂਗ ਕੰਮ ਕਰਦਾ ਹੈ, ਫਿਰ ਜਦੋਂ ਇਸ ਦਾ container ਵਿਊ ਵਿੱਚ ਹੋ ਤਾਂ ਉੱਥੇ ਰਹਿੰਦਾ ਹੈ — section headers ਲਈ ਸ਼ਾਨਦਾਰ।absolute/fixed elements normal flow ਤੋਂ ਹਟਾਏ ਜਾਂਦੇ ਹਨ, ਇਸ ਲਈ ਉਹ ਥਾਂ ਰਾਖਵਾਂ ਨਹੀਂ ਕਰਦੇ — siblings ਇਸ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੇ ਹਨ ਜਿਵੇਂ ਇਹ ਉੱਥੇ ਨਹੀਂ ਹਨ, ਜੋ ਓਵਰਲੈਪ ਦਾ ਕਾਰਨ ਬਨ ਸਕਦਾ ਹੈ। ਇਸ ਲਈ ਯੋਜਨਾ ਬਣਾਓ (ਜਿਵੇਂ ਇੱਕ fixed navbar ਦੀ ਪੂਰਤੀ ਕਰਨ ਲਈ padding ਸ਼ਾਮਲ ਕਰੋ)।
position overlays, sticky headers, modals, dropdowns, ਅਤੇ badges ਲਈ ਜ਼ਰੂਰੀ ਹੈ।
relative-parent/absolute-child ਸੰਬੰਧ ਅਤੇ fixed-vs-sticky ਅੰਤਰ ਵਿਵਹਾਰਕ ਮੁਬ ਹਨ ਜੋ ਤੁਸੀਂ ਨਿਰੰਤਰ ਵਰਤਦੇ ਹੋ।