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

अब हम फिक्स्ड पोजिशनिंग को समझेंगे। यह एब्सोल्यूट पोजिशनिंग के समान है, अंतर तब प्रकट होता है जब स्क्रॉलबार मौजूद होता है।

पेज को स्क्रॉल करने पर एब्सोल्यूटली पोजिशन किए गए एलिमेंट्स पेज के साथ स्क्रॉल हो जाएंगे। उदाहरण देखें:

html<div id="elem"></div>
<div id="content">
  some long text
</div>

css#elem {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

#content {
  margin: 0 auto;
  width: 300px;
  text-align: justify;
  font: 16px Arial;
}

Результат:

ऐसा करना संभव है कि पेज स्क्रॉल होने पर पोजिशन किया गया एलिमेंट अपनी जगह पर रुका रहे। इसके लिए उसे position प्रॉपर्टी का मान fixed देकर फिक्स्ड पोजिशनिंग देनी होगी:

html<div id="elem"></div>
<div id="content">
  some long text
</div>

css#elem {
  position: fixed; /* फिक्स्ड पोजिशनिंग सेट करें */
  top: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

#content {
  margin: 0 auto;
  width: 300px;
  text-align: justify;
  font: 16px Arial;
}

Результат: