Positioning in CSS
जब हम कोई webpage create करते हैं तो उसमें कई सारे element उसी order में show होते हैं जिस order में हमने उन्हें create किया हैं एवं हर element की एक default position भी होती है। पर यदि हम चाहें तो अपने अनुसार उन element की position set कर सकते हैं। इसके लिए हम position property का use करते हैं।
Position Property की different values –
- static
- relative
- fixed
- absolute
1) position: static;
HTML elements की by default position static होती हैं। यदि हम किसी element की position static set करते हैं तो कोई फर्क नहीं पड़ेगा। वह element page के normal flow के हिसाब से ही display होगा।
नोट :- top, left, right, bottom, static elements पर work नहीं करती।
2) position: relative;
जब हम किसी element की position relative set करते हैं तो हम उस element को एक नई position दे सकते हैं जो उसकी original position के respect में define की जाती हैं। For e.g. यदि हमारे पास एक <div> हैं और हम उसे उसकी normal, position से 20px right में move करना चाहें तो हम उसे position property दे कर position की value relative देंगे और left property का use करेंगे।
<style>
div{
position: relative;
left: 20px;
border: 1px solid red;
}
</style>
<body>
<div>This is a box</div>
यहाँ हमने left property का use किया हैं क्योंकि हम इस div को left से 20px move कराना चाह रहे थे। यदि हमें इसे right से move कराना हो तो right property top से move कराने के लिए top तथा bottom से move कराने के लिए bottom property का use करेंगे।
3) position: fixed;
किसी element की position को यदि fixed set किया जाता हैं तो वह element fixed हो जाता हैं और page को scroll करने पर भी अपनी जगह से नहीं हिलता। जब हम किसी element की position ‘fixed’ set करते हैं तो उसे view port या screen के respect में define किया जाता हैं।
4) position: absolute;
यदि हम किसी element को उसके parent element के respect में position करना चाहें तो हम absolute positioning का use करते हैं। For e.g. यदि हमारे पास एक एक div के अंदर एक div हैं, और हम अंदर वाली div को बाहर वाली div के respect में position देना चाहें तो absolute positioning का use करेंगे।
नोट :- यदि किसी element को absolute position देना हो तो उसके parent element की position relative होना चाहिए।
For e.g.
<style>
#one{
width: 400px;
height: 400px;
border: 1px solid green;
position: relative;
}
#two{
position: absolute;
height: 15px;
width: 150px;
border: 1px solid blue;
left: 50px;
}
<body>
<div id =“one”>
<div id = “two”></div>
</div>
</body>
