CSS Position Offsets
In this page:
selector {
position: relative | absolute | fixed | sticky;
top: length;
right: length;
bottom: length;
left: length;
}Offsets को एक Position Value चाहिए
top/right/bottom/left default position: static वाले किसी element पर कुछ नहीं करते -- ये सिर्फ तभी असर करते हैं जब position को relative, absolute, fixed, या sticky set किया जाए। यह सबसे common वजह है जिससे किसी developer का offset नज़रअंदाज़ हुआ लगता है।
- Accepted values:
- top | right | bottom | left — 10px, 5%, या auto जैसे offsets
- inset — सभी चार sides के लिए shorthand
- length — reference edge से distance
- percentage — containing block के relative
- auto — कोई offset set नहीं (default)
- सिर्फ तभी लागू होता है जब position static न हो
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Offsets Require a Position Value
<style>
.ignored {
top: 20px;
background: gray;
color: white;
padding: 10px;
margin-bottom: 10px;
}
.works {
position: relative;
top: 20px;
background: crimson;
color: white;
padding: 10px;
}
</style>
<div class="ignored">top: 20px is ignored (position: static)</div>
<div class="works">top: 20px works (position: relative)</div>Relatively Positioned Elements पर Offsets
position: relative पर, offsets element को visually वहाँ से shift करते हैं जहाँ वह normally flow में बैठता, लेकिन जो जगह उसने originally occupy की थी वह reserved बनी रहती है -- दूसरे elements gap भरने के लिए reflow नहीं होते। Positive values इसे उस edge से दूर move करती हैं; सिर्फ offsets के ज़रिए यहाँ कोई असली centering नहीं है।
- Accepted values:
- length — जैसे 20px या 2rem
- percentage — containing block के relative
- auto — browser तय करता है (initial value)
- negative length — edge को बाहर की तरफ़ move करता है
- सिर्फ तभी लागू होता है जब position static न हो
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Offsets on Relatively Positioned Elements
<style>
.box {
position: relative;
top: 20px;
left: 20px;
background: crimson;
color: white;
padding: 10px;
}
</style>
<div class="box">Shifted, but its original space stays reserved</div>
<div style="background: #ddd; padding: 10px;">Not moved up to fill the gap</div>Absolutely Positioned Elements पर Offsets
position: absolute पर, offsets सबसे नज़दीकी उस ancestor के edges से measure होते हैं जिसकी position static के अलावा कुछ और set है (इसका positioned containing block) -- viewport से नहीं, और उसकी normal flow position से भी नहीं, जो पूरी तरह हटा दी जाती है।
- Accepted values:
- length — जैसे 20px या 2rem
- percentage — containing block के relative
- auto — browser तय करता है (initial value)
- negative length — edge को बाहर की तरफ़ move करता है
- सिर्फ तभी लागू होता है जब position static न हो
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Offsets on Absolutely Positioned Elements
<style>
.parent {
position: relative;
min-height: 100px;
background: #eef;
border: 2px solid #99a;
}
.child {
position: absolute;
top: 10px;
right: 10px;
background: crimson;
color: white;
padding: 8px;
}
</style>
<div class="parent">
<div class="child">Measured from the parent's edges</div>
</div>Fixed और Sticky Elements पर Offsets
position: fixed offsets को browser viewport से ही measure करता है और scrolling को पूरी तरह नज़रअंदाज़ करता है, जबकि position: sticky offsets को सबसे नज़दीकी scrolling ancestor से measure करता है लेकिन सिर्फ तभी शुरू होता है जब element वरना उस offset threshold से आगे scroll हो जाता।
- Accepted values:
- length — जैसे 20px या 2rem
- percentage — reference box के relative (fixed के लिए viewport)
- auto — browser तय करता है (initial value)
- negative length — edge को बाहर की तरफ़ move करता है
- सिर्फ तभी लागू होता है जब position static न हो
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Offsets on Fixed and Sticky Elements
<style>
.fixed {
position: fixed;
top: 0;
right: 0;
background: darkorange;
color: white;
padding: 10px;
}
.sticky {
position: sticky;
top: 0;
background: seagreen;
color: white;
padding: 10px;
}
.content p {
background: #f0f0f0;
padding: 12px;
margin-bottom: 10px;
}
</style>
<div class="fixed">Measured from the viewport</div>
<div class="sticky">Measured from the scrolling ancestor</div>
<div class="content">
<p>Scroll down to compare fixed vs sticky. Paragraph 1.</p>
<p>Paragraph 2.</p>
<p>Paragraph 3.</p>
<p>Paragraph 4.</p>
<p>Paragraph 5.</p>
<p>Paragraph 6.</p>
<p>Paragraph 7.</p>
<p>Paragraph 8.</p>
</div>Opposite Offsets को साथ में Set करना
किसी explicit width के बिना किसी element पर left और right दोनों (या top और bottom दोनों) set करना उसे उन दो edges के बीच की distance भरने के लिए stretch कर देता है -- किसी width value को hardcode किए बिना full-width absolutely positioned overlays के लिए एक common technique।
- Accepted values:
- length — जैसे 20px या 2rem
- percentage — containing block के relative
- auto — browser तय करता है (initial value)
- negative length — edge को बाहर की तरफ़ move करता है
- सिर्फ तभी लागू होता है जब position static न हो
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Setting Opposite Offsets Together
<style>
.parent {
position: relative;
height: 100px;
background: #eef;
border: 2px solid #99a;
}
.overlay {
position: absolute;
left: 0;
right: 0;
background: crimson;
color: white;
padding: 8px;
}
</style>
<div class="parent">
<div class="overlay">Stretched to fill the width, no width set</div>
</div>position: staticवाले किसी element परtopयाleftset करना, जिसका कोई असर नहीं होता।- उस absolute element पर offsets इस्तेमाल करना जिसके parent की कोई
positionनहीं है, इसलिए वह page के relative रखा जाता है। - किसी relative element पर
topऔरbottomदोनों set करना और उम्मीद करना कि दोनों लागू होंगे, जबकिtopजीतता है।
हर modern browser में supported: Chrome, Firefox, Safari, Edge और Opera।
Chapter Quiz — Complete all 14 topics to unlock
0/14 topics done
Complete these topics first: