हम CSS में किसी एलिमेंट की पोजिशनिंग को स्टैटिक के रूप में परिभाषित कर सकते हैं जो एलिमेंट को किसी विशेष तरीके से नहीं बल्कि सामान्य तरीके से रेंडर करता है। स्टैटिक पोजिशनिंग वाले एलिमेंट्स CSS पोजिशनिंग प्रॉपर्टीज (लेफ्ट, राइट, टॉप और बॉटम) से प्रभावित नहीं होते।
उदाहरण
आइए CSS स्टैटिक पोजिशनिंग मेथड का एक उदाहरण देखें:
<!DOCTYPE html> <html> <head> <style> p { margin: 0; } div:first-child { position: static; background-color: orange; text-align: center; } </style> </head> <body> <div>Demo text</div> <p>This is demo text wherein we are displaying an example for static positioning.</p> <div></div> </body> </html>
आउटपुट
उपरोक्त कोड के लिए आउटपुट:
एक और उदाहरण
आइए पोजिशनिंग मेथड का एक और उदाहरण देखें:
<!DOCTYPE html> <html> <head> <style> div { border: 2px double #a43356; margin: 5px; padding: 5px; } #d1 { position: relative; height: 10em; } #d2 { position: absolute; width: 20%; bottom: 10px; /*relative to parent d1*/ } #d3 { position: fixed; width: 30%; top:10em; /*relative to viewport*/ } </style> </head> <body> <div id="d1">This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. <mark>relative</mark> <div id="d2"><mark>absolute</mark></div> <div id="d3"><mark>fixed</mark></div> </div> </body> </html>
आउटपुट
उपरोक्त कोड के लिए आउटपुट:
