हम सीएसएस में एक तत्व की स्थिति को सापेक्ष के रूप में परिभाषित कर सकते हैं जो सामान्य रूप से तत्व को प्रस्तुत करता है। सापेक्ष के रूप में पोजिशनिंग विधि वाले तत्व सीएसएस पोजिशनिंग गुणों (बाएं, दाएं, ऊपर और नीचे) द्वारा स्थित होते हैं।
उदाहरण
आइए CSS सापेक्ष स्थिति निर्धारण विधि के लिए एक उदाहरण देखें -
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 0;
}
div:first-child {
position: relative;
top:20px;
background-color: orange;
text-align: center;
}
</style>
</head>
<body>
<div>PostgreSQL</div>
<p>PostgreSQL is a powerful, open source object-relational database system.
It has more than 15 years of active development.................</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">PhoneGap is a software development framework by Adobe System, which is used to develop mobile applications. To develop apps using PhoneGap, the developer does not require to have knowledge of mobile programming language but only web-development languages like, HTML, CSS, and JScript.<mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html> आउटपुट
यह निम्न आउटपुट देता है:-
