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

position: fixed के साथ सेट किया गया तत्व पेज स्क्रॉल होने पर भी उसी स्थान पर रहता है। यह व्यूपोर्ट के सापेक्ष स्थित होता है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      div.demo1 { 
        position: relative; 
        color: white; 
        background-color: orange; 
        border: 2px dashed blue; 
        width: 600px; 
        height: 200px; 
      } 
      div.demo2 { 
        position: absolute; 
        color: white; 
        background-color: orange; 
        border: 2px dashed blue; 
        top: 50px; 
        right: 0; 
        width: 300px; 
        height: 100px; 
      } 
      div.demo3 { 
        position: fixed; 
        bottom: 0; 
        right: 20px; 
        width: 500px; 
        border: 3px solid orange; 
        color: blue; 
      } 
    </style> 
  </head> 
  <body> 
    <h2>डेमो हेडिंग</h2> 
    <p>यह डेमो टेक्स्ट है।</p> 
    <p>यह डेमो टेक्स्ट है।</p> 
    <p>यह डेमो टेक्स्ट है।</p> 
    <p>यह डेमो टेक्स्ट है।</p> 
    <div class="demo1">position: relative; 
      <div class="demo2"> position: absolute; </div> 
      <div class="demo3"> position: fixed; </div> 
    </div> 
    <p>यह एक और डेमो टेक्स्ट है।</p> 
  </body> 
</html>

आउटपुट

व्याख्या: .demo1 (relative) सामान्य प्रवाह में है। .demo2 (absolute) अपने निकटतम स्थित पूर्वज (.demo1) के सापेक्ष स्थित है। .demo3 (fixed) व्यूपोर्ट के सापेक्ष स्थित है (bottom: 0, right: 20px) और स्क्रॉल करने पर भी दृश्यमान रहता है। sticky स्क्रॉल के आधार पर relative/fixed के बीच स्विच करता है।