CSS में स्टेटिक पोजिशनिंग

स्टेटिक पोजिशनिंग

स्टेटिक पोजिशनिंग के साथ, एलिमेंट्स top, bottom, left, और right प्रॉपर्टीज से प्रभावित नहीं होते। इसके लिए position: static उपयोग करें।

विशेषताएं:

डिफ़ॉल्ट पोजिशनिंग (सभी एलिमेंट्स के लिए)
नॉर्मल डॉक्यूमेंट फ्लो में रहता है
ऑफसेट प्रॉपर्टीज (top, right, bottom, left) नजरअंदाज की जाती हैं
z-index का कोई प्रभाव नहीं
नया स्टैकिंग कॉन्टेक्स्ट नहीं बनाता

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
div.static {
  position: static;
  color: white;
  background-color: orange;
  border: 2px dashed blue;
}
</style>
</head>
<body>
<h2>डेमो हेडिंग</h2>
<p>यह डेमो टेक्स्ट है।</p>
<p>यह डेमो टेक्स्ट है।</p>
<div class="static"> position: static; </div>
<p>यह एक और डेमो टेक्स्ट है।</p>
</body>
</html>

आउटपुट

डिव नॉर्मल फ्लो में दिखाई देता है, कोई ऑफसेट लागू नहीं होता (भले ही top/left आदि सेट हों)।

पोजिशनिंग प्रकारों की तुलना:

position	फ्लो में	ऑफसेट्स	z-index	स्टैकिंग कॉन्टेक्स्ट
static	हाँ	नहीं	नहीं	नहीं
relative	हाँ	हाँ	हाँ	हाँ
absolute	नहीं	हाँ	हाँ	हाँ
fixed	नहीं	हाँ	हाँ	हाँ
sticky	हाँ*	हाँ	हाँ	हाँ

कब उपयोग करें:

डिफ़ॉल्ट व्यवहार रीसेट करने के लिए (अन्य पोजिशनिंग ओवरराइड करने के लिए)
जब कोई पोजिशनिंग आवश्यक न हो
नॉर्मल फ्लो लेआउट के लिए (फ्लेक्सबॉक्स/ग्रिड बच्चे डिफ़ॉल्ट रूप से स्टेटिक होते हैं)

नोट:

position: static स्पष्ट रूप से सेट करने की शायद ही कभी आवश्यकता होती है क्योंकि यह डिफ़ॉल्ट है। यह मुख्य रूप से अन्य पोजिशनिंग मानों को ओवरराइड करने या CSS रीसेट में उपयोगी होता है।