 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में आपका स्वागत है। आज हम लेसन ४३ सीखनेवाले हैं।
पिछले लेसन में हम ने अलग अलग तरह के cursors डिस्प्ले करना सीखा है।
आज हम CSS positioning के बारे में सीखेंगे।
CSS position property
यह बताती है की एक element की वेब पेज में पोजीशन कैसी होगी। इस प्रॉपर्टी की 4 values होती है। १. static, २. relative, ३. absolute, और ४. fixed.CSS position static
इस में element को HTML का जो नार्मल फ्लो होता है उसके अनुसार position किया जाता है। यह default position होती है। इस में element को डिस्प्ले करने में कोई भी special position लागु नहीं होती। इसे ऐसा लिखा जाता है।position: static
हम अगर CSS position का उपयोग नहीं करते हैं तो यह position आती है।
CSS position relative
यह भी static के जैसे ही होता है। यह भी element को HTML के normal flow में ही position करता है। लेकिन इस में हम offset दे सकते हैं। जैसेposition:relative;
left: 20vw;
इसमें इस element को लेफ्ट में 20vw का offset दिया है। इसका मतलब element के left में 20vw के अंतर में दूसरा element नहीं आ सकता है। ऐसे ही left, right, और bottom भी दे सकते हैं।
CSS position fixed
यह देने से element एक fixed position में डिस्प्ले होता है। इस में element की position viewport के height और width की तुलना में दिए जाते हैं। यह element एक ही जगह पर फिक्स रहता है। वेब ब्राउज़र को स्क्रॉल करने पर भी यह अपनी जगह से हिलता नहीं है। इसका कोड ऐसा होता है।.p3 {
position:fixed;
}
CSS position absolute
जब हम किसी element के लिए absolute position देते है तब उसकी पोजीशन उसके previous element की तुलना में होती है। अगर previous element की पोजीशन static position छोड़कर दूसरी कोई भी हो तो हम ऐसा कर सकते हैं। ऐसा करने से स्क्रॉल करते समय parent element जैसा move होता है उसके साथ absolute position दिया हुआ एलिमेंट भी move होता है।एक फरक पर ध्यान दीजिये - fixed position के लिए हम viewport के तुलना में dimensions देते हैं और absolute position के लिए हम सब से नजदीक जो parent element है (जिसकी position static के आलावा दूसरी कोई भी है) उसकी तुलना में देते हैं।
Absolute position का स्क्रिप्ट ऐसा होता है।
position: static;
}
CSS position sticky
इस पोजीशन में डिस्प्ले किया हुआ एलिमेंट विशिष्ट प्रकार से डिस्प्ले होता है। यह एलिमेंट जब वेब पेज के बीच में डिस्प्ले होता है तब relative पोजीशन में होता है। इस लिए हम स्क्रॉल करने पर यह भी move होता है। एक बार ब्राउज़र की बॉर्डर लगने पर यह fixed पोजीशन में आ जाता है और वहाँ पर फिक्स हो जाता है। अब वह अपनी जगह से हिलता नहीं है।
इस के लिए स्क्रिप्ट ऐसा लिखते हैं।
.p4 {
position:sticky;
}
हम यह पोसिशन्स हमारे वेब पेज में डिस्प्ले करके देखेंगे। एक नयी Notepad फाइल ओपन कीजिये। इसमें हमारे lesson-40-2 का सारा कोड कॉपी कीजिये। इस में style में लिखा हुआ सारा कोड डिलीट कीजिये और यह कोड लिखिए।
.p1 {
position: static;
color: violet;
font-weight:bold;
font-size: 5vw;
}
.p2 {
position:relative;
left: 20vw;
font-weight:bold;
font-size: 5vw;
color: violet;
}
.p3 {
position:fixed;
font-weight:bold;
font-size: 5vw;
color: red;
top: 15vw;
left: 20vw;
}
.p4 {
position:sticky;
font-weight:bold;
font-size: 5vw;
color: green;
top:0vw;
left: 15vw;
}
आप इस कोड को ध्यान से पढ़िए। इस में हमने चार पैराग्राफ के लिए चार तरह की पोसिशन्स दी है और हर एक पैराग्राफ में बाकी की CSS प्रॉपर्टीज दी है।
 |
| आकृति ४३-१. CSS position property - CSS |
इन पोजीशन का उपयोग हम बॉडी में p tags में करेंगे।
 |
| आकृति ४३-२. CSS position property |
आकृति ४३-२ देखिये। हमने चार पोसिशन्स के लिए चार पैराग्राफ बनाये हैं और उनको पोजीशन दी है। इस फाइल को "Lesson-43" और "Lesson-43.html" के नाम से save कीजिये। HTML document पर डबल क्लिक कीजिये। आउटपुट देखिये।
यह आउटपुट नए वेब पेज में देखने के लिए ऊपर डिस्प्ले की हुई आकृति पर क्लिक कीजिये। हम ने positions में कुछ बदल किये हैं, ताकि वेब पेज में वह ठीक से दिखे। आप ध्यान से देखिये की वह कैसे काम करते हैं।
Fixed पोजीशन दी हुई लाइन स्क्रॉल करने पर भी हिलती नहीं है। वह एक जगह पर फिक्स्ड रहती है। Static पोजीशन मतलब वह वेब पेज में दुसरे elements की तुलना में एक ही जगह रहना। यह टेक्स्ट स्क्रॉल करने पर दुसरे elements के साथ move होता है लेकिन वेब पेज में उसकी जो पोजीशन हैं वह नहीं छोड़ता। Relative position एक element का offset बताता है। इस element में दूसरा एलिमेंट डिस्प्ले नहीं हो सकता है। स्क्रॉल करते समय आप sticky एलिमेंट को देखिये। यह शुरू में स्क्रॉल होता है लेकिन जब ब्राउज़र के बॉर्डर को टच करता है तब fixed हो जाता है।
इस आउटपुट से हम चारों तरह के पोसिशन्स समझ सकते हैं।
इस में चार तरह के पोसिशन्स डिस्प्ले हुए हैं। इनको समझ लीजिये। आप ब्राउज़र की साइज को छोटा कीजिये (या restore पर क्लिक कीजिये)। अब स्क्रॉल कीजिये।
Fixed पोजीशन दी हुई लाइन स्क्रॉल करने पर भी हिलती नहीं है। वह एक जगह पर फिक्स्ड रहती है। Static पोजीशन मतलब वह वेब पेज में दुसरे elements की तुलना में एक ही जगह रहना। यह टेक्स्ट स्क्रॉल करने पर दुसरे elements के साथ move होता है लेकिन वेब पेज में उसकी जो पोजीशन हैं वह नहीं छोड़ता। Relative position एक element का offset बताता है। इस element में दूसरा एलिमेंट डिस्प्ले नहीं हो सकता है। स्क्रॉल करते समय आप sticky एलिमेंट को देखिये। यह शुरू में स्क्रॉल होता है लेकिन जब ब्राउज़र के बॉर्डर को टच करता है तब fixed हो जाता है।
इस आउटपुट से हम चारों तरह के पोसिशन्स समझ सकते हैं।
Now insert following in the style.
CSS z-index
इसका उपयोग एक के ऊपर एक elements डिस्प्ले करने के लिए होता है। अगर एक element-1 का z-index है 1 और element-2 का z-index है 2, तो element-1 पीछे जाएग और उसके ऊपर element-2 डिस्प्ले होगा। इस का मतलब element-1 के आगे element-2 को डिस्प्ले किया जाता है। Z-index के लिए negative values का भी उपयोग कर सकते हैं।हम इसका उपयोग हमारे स्क्रिप्ट में करेंगे। हम वेब पेज में एक इमेज इन्सर्ट करेंगे। इसके लिए z-index ऐसा लिखेंगे।
img (
position: absolute;
z-index: 1;
}
.p5 {
z-index: 2;
}
Body में लिखिए -
<p class="p5">
This will be displayed on image. Image is behind this text.
</p>
यह हमारे स्क्रिप्ट में लिखिए और save कीजिये।
 |
| आकृति ४३-४. CSS z-index |
अब आउटपुट देखिये।
 |
| आकृति ४३-५. CSS z-index |
Important Points:
१. CSS position property यह बताती है की एक वेब पेज में element की position कैसी हो।२. Element की पोजीशन static, relative, fixed, absolute या sticky होती है।
३. CSS z-index का उपयोग एक element के आगे दूसरा element display करने के लिए होता है।
लेसन ४२ लेसन ४४
