web pages में elements की स्थिति को निर्धारण करना style के माध्यम से पोजीशन के आने से थोड़ा बेहतर हो गया है।
Introduction to CSS position
Web pages में elements की स्थिति यानी position का निर्धारण करना position css से बहुत आसान हो गया है। यह एक बहुत अच्छी technique है। किसी भी elements को work flow में position देना आसानी से हो जाता है और screen पर render होने पर elements पर एक कंट्रोल बना रहता है।
What is Document Flow?
वेब पेज के जो कोडिंग का तरीका है या जिस तरह से एक किनारे से बनाया जाता है, वही work flow कहलाता है। यह top से bottom और left to right क्रमशः block level elements और inline elements के लिए होता है।
Use of Position in CSS
Position style का उपयोग निम्नलिखित बातों के लिए किया जाता है-
Elements की स्थिति यानी position को कंट्रोल किया जाता है।
Elements की स्थिति का निर्धारण यानी positioning किसी दूसरे element के सापेक्ष relative करने में।
Elements तक पहुंच यानी accessbility बनाने के लिए।
Elements को work flow से अलग करने के लिए।
Scroll effect डालने के लिए।
Viewport के relative स्थिति निर्धारण यानी positioning करने के लिए।
Overlapping Elements को ठीक करने के लिए।
CSS Position Property
Css Positoning के लिए कई property use की जाती हैं। Elements की स्थिति यानी position के आधार पर इन्हें बांटा गया है। इनमें से प्रमुख इस प्रकार हैं-
Types of CSS Position:
1. Static
Static position value by default होती है। कोडिंग जिस work flow में किया गया है, वह सभी elements के लिए static ही होती है। यह work flow से बाहर नहीं जाती है और न ही top,bottom, left,right,z index property use करती है। z-index के बारे में अगले ब्लॉग में बताया गया है।
<h1>This is heading</h1>
`<p>This is paragraph</p>`
`<h2>This is second heading</h2>`
Output:
2. Relative
इस position का element अपनी जगह के ही सापेक्ष अपना स्थान top, bottom,left, right and z-index देने पर बदलता है। यह भी work flow को नहीं तोड़ता है। यह अपनी original जगह से अपना स्थान बदलता है।
जैसे किसी div में-
<h1>This is heading</h1>
`<p>This is paragraph</p>`
`<h2>This is second heading</h2>`
`<div></div>`
यह style देने पर-
div{
`width:200px;`
`height: 200px;`
`background-color: red;`
`position: relative;`
`top:100px;`
`left:100px;`
`}`
आउटपुटः
3. Absolute
इस पोजीशन में element अपनी नजदीकी closest positioned parent or ancestor के अनुसार अपनी स्थिति यानी position तय करता है। यह डाक्यूमेंट के work flow को break कर देता है और इसे आसानी से top, bottom, left , right property से इसकी नजदीकी positioned parent के अनुसार सेट किया जा सकता है।
positioned parent or ancestor: वह parent element, जो किसी भी पोजीशन value जैसे- fixed, absolute, relative, sticky का प्रयोग कर रहा हो। या उसकी style में हो।
और यदि कोई भी positioned ancestor नहीं है, तो element body को ही अपना पूर्वज ancestor or parent मान लेता है, और उसी के अनुसार अपनी स्थिति position तय करता है।
html:
<h1>This is heading</h1>
`<p>This is paragraph</p>`
`<h2>This is second heading</h2>`
`<div></div>`
CSS:
div{
`width:200px;`
`height:200px;`
`position: absolute;`
`top:100px;`
`left: 200px;`
`background-color: red;`
`}`
Output:
4. Sticky
इस पोजीशन का element पहले तो relative की तरह व्यवहार करता है, लेकिन जब एक बार इसकी position top, bottom, left and right से बता दी जाती है, तो यह element उस जगह पहुंचकर fixed हो जाता है। यह डाक्यूमेंट के normal flow को नहीं तोड़ता है। और यह तभी काम करता है जब एक बार positioned properties में से कोई न कई value जैसे top, left , bottom दे दी जाती है। यह तभी sticky होता है, जब scroll हो रहा हो। जैसे-
Html:
<div></div>
<p>....</p>
CSS:
div{
`width:50px;`
`height: 50px;`
`background-color: red;`
`position: sticky;`
`top:100px;`
`left:200px;`
`}`
Output:
5. Fixed
यह अपनी जगह छोड़कर ब्राउजर के अनुसार दी गई जगह पर चिपक fix हो जाता है और scroll करने पर ऊपर नीचे नहीं जाता है। यह डाक्यूमेंट के normal flow को तोड़कर break करके बाहर हो जाता है। यह सभी property-top,bottom,left, right, z index use करता है। और यह element अपनी जगह से हटने के बाद अपनी original जगह पर कोई space नहीं छोड़ता है।
html:
<div> ?</div>
`<p>.....</p>`
CSS:
div{
`width:50px;`
`height:50px;`
`background-color: yellow;`
`position: fixed;`
`right:0px;`
`}`
Output:
Top, Bottom, Left and Right Positioning Properties
यह properties elements को positon type देने के बाद प्रयोग की जाती हैं। Elements को उसके Parent element के relative या viewport के relative position देने के लिए top,bottom, left and right property का प्रयोग किया जाता है।
इन सबकी value negative और positive दोनों हो सकती हैं।