CSS पोजिशनिंग एलिमेंट्स (स्टेटिक, रिलेटिव, एब्सोल्यूट, फिक्स्ड)

CSS position प्रॉपर्टी चार मान लेती है: static (डिफ़ॉल्ट, नॉर्मल फ्लो), relative (नॉर्मल फ्लो + ऑफसेट), absolute (पैरेंट के सापेक्ष, फ्लो से बाहर), fixed (व्यूपोर्ट के सापेक्ष, स्क्रॉल पर स्थिर)।

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    div { color: white; text-align: center; height: 100px; width: 100px; }
    .static { position: static; background-color: greenyellow; }
    .relative { position: relative; left: 50px; background-color: rgb(255, 47, 47); }
    .absolute { position: absolute; right: 50px; top: 20px; background-color: hotpink; }
  </style>
</head>
<body>
  <h1>Position elements example</h1>
  <div class="static">STATIC</div>
  <div class="relative">RELATIVE</div>
  <div class="absolute">ABSOLUTE</div>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

मुख्य बिंदु

• static - डिफ़ॉल्ट, top/left/right/bottom कोई प्रभाव नहीं
• relative - मूल स्थान से ऑफसेट, स्पेस सुरक्षित रहता है
• absolute - निकटतम positioned पैरेंट के सापेक्ष, फ्लो से बाहर
• fixed - व्यूपोर्ट के सापेक्ष, स्क्रॉल पर नहीं हिलता
• z-index - स्टैकिंग क्रम नियंत्रित करता है (positioned तत्वों पर)