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

CSS position: relative

position: relative का उपयोग

position: relative प्रॉपर्टी एलिमेंट को उसकी सामान्य स्थिति (नॉर्मल फ्लो) के सापेक्ष पोजिशन करने की अनुमति देती है। एलिमेंट अभी भी डॉक्यूमेंट फ्लो में जगह घेरता है, लेकिन top, right, bottom, left प्रॉपर्टीज का उपयोग करके उसे ऑफसेट किया जा सकता है।

उदाहरण

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        position: relative;
        left: 20px;
        border: 3px solid blue;
      }
    </style>
  </head>
  <body>
    <h1>Positioning Element</h1>
    <div>
      div element with position: relative;
    </div>
  </body>
</html>

उपयोग: यह अक्सर position: absolute वाले चाइल्ड एलिमेंट्स के लिए पोजिशनिंग कॉन्टेक्स्ट (कंटेनिंग ब्लॉक) बनाने के लिए उपयोग किया जाता है।

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

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

  1. CSS में बैकग्राउंड पोजिशन सेट करना CSS में बैकग्राउंड पोजिशन सेट करना

    CSS background-position प्रॉपर्टी का उपयोग ओरिजिन के सापेक्ष बैकग्राउंड इमेज के लिए एक प्रारंभिक स्थिति सेट करने के लिए किया जाता है। सिंटैक्स CSS background-position प्रॉपर्टी का सिंटैक्स निम्नलिखित है: Selector {    background-position: /*value*/ } निम्नलिखित उदाहरण CSS background-posi

  1. CSS पोजिशनिंग एलिमेंट्स (स्टेटिक, रिलेटिव, एब्सोल्यूट, फिक्स्ड) CSS पोजिशनिंग एलिमेंट्स (स्टेटिक, रिलेटिव, एब्सोल्यूट, फिक्स्ड)

    CSS position प्रॉपर्टी चार मान लेती है: static (डिफ़ॉल्ट, नॉर्मल फ्लो), relative (नॉर्मल फ्लो + ऑफसेट), absolute (पैरेंट के सापेक्ष, फ्लो से बाहर), fixed (व्यूपोर्ट के सापेक्ष, स्क्रॉल पर स्थिर)। उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe U