CSS position मूल्ये काय आहेत?

Question

IT Interview Practice · Accepted Answer

`position` नियंत्रित करते की एक घटक कसे ठेवलेले आहे आणि offset गुणधर्म (`top`/`right`/`bottom`/`left`) लागू होत आहेत की नाही.

```css
.a { position: static; }   /* default — normal flow, offsets IGNORED */
.b { position: relative; } /* normal flow, but offsets shift it from itself */
.c { position: absolute; } /* removed from flow, positioned vs nearest positioned ancestor */
.d { position: fixed; }    /* removed from flow, positioned vs the VIEWPORT */
.e { position: sticky; }   /* hybrid: normal until a scroll threshold, then sticks */
```

## relative + absolute: मुख्य जोडी

`absolute` एक घटक त्याच्या **सर्वात जवळच्या स्थित केलेल्या पूर्वज** (`static` व्यतिरिक्त कोणत्याही) च्या संबंधात स्थान देते. तर तुम्ही `position: relative` एक मूल घटकावर सेट करता त्याला संदर्भ बिंदू बनवण्यासाठी:

```css
.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.

## fixed vs sticky

```css
.navbar { position: fixed; top: 0; }   /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
```

- **fixed** — viewport ला लॉक केलेले (नेहमी दृश्यमान), उदा. एक स्थायी navbar.
- **sticky** — threshold (`top: 0`) पर्यंत relative सारखे कार्य करते, नंतर तेथे राहते जेव्हा त्याचा कंटेनर दृश्यात आहे — विभाग शीर्षकांसाठी उत्तम.

## एक सामान्य त्रुटी

`absolute`/`fixed` घटक **सामान्य प्रवाहातून काढलेले आहेत**, त्यामुळे ते जागा राखत नाहीत — भाऊ-बहिणी असे कार्य करतात की ते तेथे नाहीत, जे ओव्हरलॅप कारणीभूत होऊ शकते. त्यासाठी योजना करा (उदा. एक fixed navbar ची भरपाई करण्यासाठी padding जोडा).

## हे महत्वाचे का आहे

`position` overlays, sticky headers, modals, dropdowns, आणि badges साठी आवश्यक आहे.

relative-parent/absolute-child संबंध आणि fixed-vs-sticky फरक हा व्यावहारिक मूल आहे जो तुम्ही सतत वापरता.

relative + absolute: मुख्य जोडी

fixed vs sticky

एक सामान्य त्रुटी

हे महत्वाचे का आहे

संबंधित प्रश्न