हम सीएसएस में एक तत्व की स्थिति को स्थिर के रूप में परिभाषित कर सकते हैं जो तत्व को किसी विशेष तरीके से नहीं, बल्कि सामान्य तरीके से प्रस्तुत करता है। स्टैटिक के रूप में पोजिशनिंग वाले एलिमेंट किसी भी 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> आउटपुट
उपरोक्त कोड के लिए आउटपुट निम्नलिखित है -
