पोजीशन प्रॉपर्टी का इस्तेमाल किसी एलीमेंट को पोजिशन करने के लिए किया जाता है। यानी निम्नलिखित पोजिशनिंग एलिमेंट हैं -
-
स्थिर - एलिमेंट बॉक्स को सामान्य दस्तावेज़ प्रवाह के एक भाग के रूप में, पूर्ववर्ती तत्व और पूर्ववर्ती निम्नलिखित तत्वों का अनुसरण करते हुए रखा गया है।
-
रिश्तेदार - एलिमेंट बॉक्स को सामान्य प्रवाह के हिस्से के रूप में बिछाया जाता है, और फिर कुछ दूरी से ऑफसेट किया जाता है।
-
पूर्ण - तत्व का बॉक्स उसके युक्त ब्लॉक के संबंध में रखा गया है, और दस्तावेज़ के सामान्य प्रवाह से पूरी तरह से हटा दिया गया है।
-
तय - एलीमेंट का बॉक्स पूरी तरह से स्थित है, जिसमें स्थिति के लिए वर्णित सभी व्यवहार हैं:निरपेक्ष।
CSS का उपयोग करके तत्वों की स्थिति के लिए कोड निम्नलिखित है -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
color: white;
text-align: center;
height: 100px;
width: 100px;
}
.static {
position: static;
background-color: greenyellow;
}
.relative {
position: relative;
left: 50px;
background-color: rgb(255, 47, 47);
}
.absolute {
position: absolute;
right: 50px;
top: 20px;
background-color: hotpink;
}
</style>
</head>
<body>
<h1>Position elements example</h1>
<div class="static">STATIC</div>
<div class="relative">RELATIVE</div>
<div class="absolute">ABSOLUTE</div>
</body>
</html> आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
