CSS right प्रॉपर्टी

right प्रॉपर्टी

right प्रॉपर्टी का उपयोग एलिमेंट की क्षैतिज स्थिति सेट करने के लिए किया जाता है। यह पोजिशन्ड एलिमेंट्स (relative, absolute, fixed, sticky) पर काम करता है।

सिंटैक्स:

right: auto | length | % | initial | inherit;

मान:

auto: ब्राउज़र गणना करता है (डिफ़ॉल्ट)
length: px, em, rem, cm, आदि में निश्चित दूरी
%: कंटेनिंग ब्लॉक की चौड़ाई का प्रतिशत

उदाहरण 1: absolute पोजिशनिंग के साथ right

<!DOCTYPE html>
<html>
<head>
<style>
div {
  text-align: justify;
  text-justify: inter-word;
  color: white;
  background-color: orange;
  position: absolute;
  right: 90px;
}
</style>
</head>
<body>
<h2>डेमो हेडिंग</h2>
<div>यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। यह डेमो टेक्स्ट है। </div>
</body>
</html>

आउटपुट

डिव व्यूपोर्ट (या निकटतम पोजिशन्ड एन्सेस्टर) के दाएं किनारे से 90px पर पोजिशन होगा।

उदाहरण 2: relative पोजिशनिंग के साथ right: 0

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  background-color: orange;
  width: 100px;
  position: relative;
  right: 0px;
  color: white;
}
</style>
</head>
<body>
<h1>विवरण</h1>
<div class="demo">परीक्षा केंद्र ABC कॉलेज के पास।</div>
<div class="demo2">परीक्षा सुबह 11 बजे शुरू होती है।</div>
</body>
</html>

आउटपुट

right: 0 के साथ relative पोजिशनिंग - एलिमेंट अपनी सामान्य पोजिशन पर रहता है (कोई ऑफसेट नहीं)।

उदाहरण 3: नकारात्मक मान

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  background-color: orange;
  width: 100px;
  position: relative;
  right: -100px;
  color: white;
}
</style>
</head>
<body>
<h1>विवरण</h1>
<div class="demo">परीक्षा केंद्र ABC कॉलेज के पास।</div>
<div class="demo2">परीक्षा सुबह 11 बजे शुरू होती है।</div>
</body>
</html>

आउटपुट

right: -100px एलिमेंट को दाएं ओर 100px खींचता है (बाएं ओर ले जाता है)।

पोजिशनिंग कॉन्टेक्स्ट:

position मान	right का संदर्भ
absolute	निकटतम positioned ancestor (या initial containing block)
fixed	व्यूपोर्ट
relative	एलिमेंट की स्वयं की सामान्य पोजिशन
sticky	स्क्रॉल कंटेनर / व्यूपोर्ट
static	काम नहीं करता (नजरअंदाज)

left vs right:

दोनों सेट होने पर: left प्राथमिकता पाता है (LTR में), right फॉलबैक है
RTL भाषाओं में: right प्राथमिकता पाता है
चौड़ाई के साथ संयोजन: left: 0; right: 0; width: auto = फुल चौड़ाई