Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS में रिलेटिव पोजीशनिंग


position: relative

रिलेटिव पोजीशनिंग के साथ, एलिमेंट अपनी सामान्य पोजीशन के सापेक्ष स्थित होता है। इसके लिए position: relative उपयोग करें।

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
div.demo {
  position: relative;
  color: white; background-color: orange;
  border: 2px dashed blue;
  left: 50px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text.</p>
<p>This is demo text.</p>
<div class="demo"> position: relative; </div>
<p>This is another demo text.</p>
</body>
</html>

आउटपुट

CSS में रिलेटिव पोजीशनिंग


  1. CSS में रिलेटिव लेंथ यूनिट्स CSS में रिलेटिव लेंथ यूनिट्स

    रिलेटिव लेंथ यूनिट्स CSS में रिलेटिव लेंथ यूनिट्स किसी अन्य लेंथ प्रॉपर्टी के सापेक्ष लंबाई निर्दिष्ट करने के लिए उपयोग की जाती हैं। क्र.यूनिट और विवरण 1emएलिमेंट के font-size के सापेक्ष, यानी 4em का अर्थ है वर्तमान फ़ॉन्ट आकार का 4 गुना। 2exवर्तमान फ़ॉन्ट के x-height के सापेक्ष। 3ch0 अक्षर की चौ

  1. CSS में स्टैटिक पोजिशनिंग CSS में स्टैटिक पोजिशनिंग

    हम CSS में किसी एलिमेंट की पोजिशनिंग को स्टैटिक के रूप में परिभाषित कर सकते हैं जो एलिमेंट को किसी विशेष तरीके से नहीं बल्कि सामान्य तरीके से रेंडर करता है। स्टैटिक पोजिशनिंग वाले एलिमेंट्स CSS पोजिशनिंग प्रॉपर्टीज (लेफ्ट, राइट, टॉप और बॉटम) से प्रभावित नहीं होते। उदाहरण आइए CSS स्टैटिक पोजिशनिंग म

  1. CSS में रिलेटिव पोजिशनिंग CSS में रिलेटिव पोजिशनिंग

    हम CSS में किसी एलिमेंट की पोजिशनिंग को रिलेटिव के रूप में परिभाषित कर सकते हैं जो एलिमेंट को सामान्य तरीके से रेंडर करता है। रिलेटिव पोजिशनिंग मेथड वाले एलिमेंट्स CSS पोजिशनिंग प्रॉपर्टीज (लेफ्ट, राइट, टॉप और बॉटम) द्वारा पोजिशन किए जाते हैं। उदाहरण आइए CSS रिलेटिव पोजिशनिंग मेथड का एक उदाहरण देखे