Day - 21 | CSS Position Explained | Static, Relative, Absolute, Fixed & Sticky + Navbar Design

Name: Day - 21 | CSS Position Explained | Static, Relative, Absolute, Fixed & Sticky + Navbar Design
Uploaded: 2025-12-18T07:56:17+00:00
Duration: 1 h 41 s
Channel: skillwaala
Description: 👨💻 What You’ll Learn in This Class: ✅ What is the Position Property in CSS and why it’s important ✅ Understanding all types of positioning — • static • relative • absolute • fixed • sticky ✅ How to use position for layouts and navigation bars ✅ Building a fixed & responsive Navbar using position ✅ Real-life examples and hands-on coding

skillwaala

10 months ago

👨‍💻 What You’ll Learn in This Class:
✅ What is the Position Property in CSS and why it’s important
✅ Understanding all types of positioning —
• static
• relative
• absolute
• fixed
• sticky
✅ How to use position for layouts and navigation bars
✅ Building a fixed & responsive Navbar using position
✅ Real-life examples and hands-on coding

Category

📚

Learning

Transcript

Display full video transcript

00:00:00hello guys good evening everyone good evening as far as Sibuul

00:00:09Ashish, Saina, Talka, Ravi Ashish, Ravi, Sibuul and other students

00:00:19एक बार सब रेस्पॉंस कर दो कि मेरी वाइस क्लियर है और स्क्रीन भी विसिवल है

00:00:40गडिवनिंग दिपिका अशिश नहीं भीजा है यह कंप्लीट इन्होंने बनाया है

00:00:47सही है परफेक्ट एक दम

00:00:49अलकाने बेजा है यह

00:00:53डिस्प्ले ऐसे कैसे आ रहा है वेटे मिनिट

00:00:57ठीक है सही है अलकाने जो बेजा है आशिश आपने जो बेजा है वो भी बिल्कुल परफेक्ट है

00:01:14और यह भी सही है

00:01:17प्रोजेक्ट फाइफ करके बनाया है बिल्कुल परफेक्ट है एक दम

00:01:22परफेक्ट है और यह क्या है यह कार्ड बनाया है सही है यह कार्ड भी

00:01:32रवी आशिश ने बनाया है ठीक है थोड़ा सा युवाई सेम रगते यह युवाई सेम नहीं है का इसका जो बटन बटन है वो सेम बनाते

00:01:43सर आज यह दो ही बना पाया हूँ परफेक्ट है दोनों अपने जो बनाया है यह किसने बनाया है ठीक है सही है यह यह भी परफेक्ट है एकदम एक्यूरीट है सिबूल सही है

00:02:00और यह कार्ड है बिल्कूल परफेक्ट एकदम सही कार्ड है और यह आपने बनाया है यह किसका है सिबूल का ठीक है आम वैब डलपर डाम्लूट सीवी ठीक है परफेक्ट बनाया है

00:02:19यह भी सही है ठीक है सिबूल सही है आपके वी तो इसके अलावा आशीश आपका उछी आप threw आपके है और भी सही है अल्का आपकी भी सही है

00:02:38इस ने वेजा है उनके सब के अभी सई है जो भी आसाइमेंट मैंने आपको दिये थे विल्गुल सई बनाया आपने

00:02:45तो देखो आज की क्लास पर अपन क्या डिसकस करने वाले हैं आगे की चीज़े डिसकस करते हैं जितना भी अपने डिसकस कराता हूं

00:03:06अपने डिसकस करते हैं आज वाली क्लास के अंदर अपना जाते हैं अपने वीस कोड की ऊपर और यहां पर जिस फोल्डर पे पन काम करें तो उसी को मैं आप पर उपन कर लेता हूं उपन फोल्डर और किस पे काम कर रहे थे पन यहां पर

00:03:2817 now और CSS क्लास वाले फोल्डर के उपर तो कल जो अपने देखा था वो अपने देखा था कि अपन नयवबार कैसे क्रियेट कर सकते हैं बस इतनी सी चीज अपने देखी थी चीक है और इसी के अंदर देखो अपन एक चीज उड़ देख लेते हैं कि यहां पर अगर नयवबा

00:03:58को मैं यहां पर रेस्पॉंसिव बनाना चाहता हूं ठीक है तो इसको अपन रेस्पॉंसिव बनागे देखते हैं अब देखो मेको यहां पर क्या करना है इसको पहले अपन रन कर लेते फाइल को और चेक करते हैं

00:04:18अब देखो इस तरीके से अपने पास अपनी यह नवबार आ रही है अपने पास अब मैं जैसे इसको इंस्पेक्ट करता हूं तो इंस्पेक्ट करने में देखो यहां पर आपकी नवबार यहां पर खराब हो रही है तो अपनी नवबार इस तरीके से अपने को यहां पर श

00:04:48जैसे मैं इसकी device यहाँ पर change करता

00:04:51तो इसके लिए अपन यहाँ पर जो काम करेंगे

00:04:54वो अपन करेंगे यहाँ पर media query

00:04:56media query के तुरू अपन यहाँ पर यहाँ पर यह काम करने वाले है

00:04:59तो यहाँ पर अपन लगाएंगे अपनी media query

00:05:03तो मैं यहाँ पर अपनी media query लगाता हूं.

00:05:05अब देखो media query basically क्या काम आती है?

00:05:07media query काम आती है अपने breakpoints set करने के लिए.

00:05:11breakpoints यहाँ पर क्या होता है?

00:05:12जैसे अगर मैं यहाँ पर बात करूँ उपने breakpoints की.

00:05:21ठीक है जैसे अपन यहाँ पर अपने breakpoints पर आते हैं.

00:05:23इमिज्ट पे आता है अपने पास यहां पर आपके पास बीज होगा या

00:05:39फिर आपका स्मार्ट फोन होगा तक यह सब चीज होगी और

00:05:511280 से

00:05:53उपर जो भी होगे वो आपके सारे

00:05:55larger desktop और monitors होगे

00:05:57तो यहाँ पर अपने पास

00:05:59अभी जो है वो अपने larger device में ही है

00:06:02जैसे आप यहाँ पर आके चेक करोगे

00:06:03तो मैं जैसे यहाँ पर आता हूँ और इसको एक बार

00:06:05फिर से inspect करता हूँ तो देखो यहाँ पर

00:06:07यह आपको बता रहा है इस display की width

00:06:10ठीक है यह जो responsive के अंदर

00:06:12आप यहाँ पर अपने

00:06:13device के साबसे भी चेक कर सकते हो

00:06:15जैसे माला iPhone 12 Pro में कैसा दिखेगा

00:06:18तो यहाँ पर ही बता देगा

00:06:19Samsung Galaxy S8 में कितना दिखेगा

00:06:21ठीक है जैसे मालूम है iPad के अंदर

00:06:23चेक कर रहा हूं तो iPad में तो विल्कुल perfect है

00:06:25लेकिन iPhone 12 Pro में यहाँ पर

00:06:27खराब हो रहा है responsive में अगर आप

00:06:29चेक करना चाहो तो यहाँ पर देखो जैसे मैं इसको

00:06:31changes कर रहा हूं तो आपके यह जो चीज है

00:06:33यह change हो रही है यह जो range है यह change हो रही है

00:06:36और यह क्या है आपकी width है चीक है

00:06:38और अगर मैं यहाँ पर इसको height के इसाब से change करूँगा

00:06:41तो यह change हो रहा है इसका मतलब यह क्या है आपकी height है

00:06:44चीक है तो यह अपने पास अपनी width और height बता रहा है

00:06:47कि आपकी width और height यहाँ पर क्या change हो रही है

00:06:50ठीक है क्या ratio है यहाँ पर विट्टुराइट का अब देखो मैं यहाँ पर जैसे मालू में कोई एक paragraph टेग लिलता हूँ यह तो आपकी नवबार है जो आपने बना रखिये यही पर आता हूँ मैंने एक paragraph टेग लिया और उसके अंदर अपने lorem करके 30 का content डाल दिया ठीक है य

00:07:2020-Pixel की margin पर लग जाएगी जीक है उसी के साथ मैं यहाँ पर इसका color change करता हूं मैंने color change करा और color में यह कहता हूं THAT

00:07:27दो के यहाँ आप चेंज करने 30 Daewilt कर देना ढ़ Δो काम मैंने यहाँ पर एक तो color change करा और एक यहाँ पर इसकी phone size यहाँ पर change �

00:07:41को media query क्या होती है media query काम आती है आपके यहां पर breakpoint

00:07:45set करने के लिए कि जैसे मालो 0 से 480 pixel में आपको क्या breakpoint

00:07:49set करना है 481 से 768 pixel में क्या breakpoint set करना है 769 से 1279 की

00:07:55बीच में क्या breakpoint set करना है तो यह आपके breakpoints होते हैं ठीक है

00:07:59जैसे मैं यहाँ पर आता हूँ और अपने breakpoint यहाँ पर set करता हूँ

00:08:02media query लगा किये अब जैसे मैं यहाँ पर जाता हूँ

00:08:05मैं इसको inspect करता हूँ और inspect करके अपन एक बार यहाँ पर आते हैं

00:08:08इसमें पूरे inspect में आते हैं ठीक है

00:08:11एक पार इसको आपस उपन करता हूँ, शाही से उपन नहीं हुआ,

00:08:14इंस्पेक्ट करो, अब देखो, मैं चाता हूँ कि जैसे ही,

00:08:19ये 900 पिक्सेल से नीचे आए, जैसे ही 900 पिक्सल विट नीचे आए,

00:08:25तो इस text का color क्या हो जाना चाहिए, green हो जाना चाहिए, ये मैं चाहता हूँ, चीक है, तो यहाँ पर देखो, अपन लगाएंगे अपनी media query, जो अपनी media query होती है, वो अपन लगाते हैं, तो मैं यहाँ पर लिखूँँगा, at the rate, मैंने लिखा media, चीक है, और screen, चीक है, media screen मैं �

00:08:55मैं यहाँ पर set कर रहा हूँ, और वो मैंने यहाँ पर कह दी कि 900 pixel, चीक है, मैंने maximum width यहाँ पर set करी, मतलब, जैसे ही 900 pixel से नीचे यह आएगा, तब अपने को क्या करना है, तब मैं चाहता हूँ कि यह जो आपका paragraph tag है, 900 ना करके change कर लो, या तो कर दो, जैसे 760 pixel कर देता ह�

00:09:25paragraph tag का color आप यहाँ पर क्या करना चाहते हो, change करना चाहते हो, और वो क्या हो जाना चाहिए, वो green हो जाना चाहिए, यह मैंने एक breakpoint यहाँ पर set करा है, कि जैसे 760 pixel से नीचे आए, तो paragraph tag का color क्या हो जाना चाहिए, green हो जाना चाहिए, जैसे 760 pixel से नीचे आए, अब भी देख

00:09:55उपर लिखी लो मैं यहाँ पर आके लिखता हूं मैं लिखता हूं 760 ठीक है तो जैसे मैंने 760 प्रेस करा तो देखो 760 पर यह है अगर आप इसको

00:10:02761 कर दोगी तो 761 पे क्योंकि आपने Maximum Width सैट करी है Maximum Width मतलब क्या हो गया है यहाँ पर कि 768 पिक्सल से उपर जो आपने आपकी Initial Property लगा रखी है वो एपलाई रहीगी ठीक है Maximum Width आपने यहाँ पर सैट कर दी कि 760 पिक्सल यहाँ पर आपकी Maximum Width है ठीक है इसके बाद �

00:10:32प्रफ टैग है उसका कलर क्या रहना चीए ग्रीन रहना चीए इतना सा मैंने यहाँ पर करा तो देखो अपन जैसे 760 पिक्सल से नीचा आ रहे तो इसका प्रफ टैग का कलर क्या ग्रीन है चीक है मीडिया क्वेरी सिर्फ यहीं कतम नहीं होती इससरी मैंने explain करा है इसको थो

00:11:02बात करें तो flex direction क्या चल रही है इसकी इसकी flex direction चल रही है आपकी row wise जैसे 760 पिक्सल से नीचे आए तब मैं कह देता हूं कि मेरे पास जो नयुबार है उसकी आप क्या करना flex direction change कर देना और flex direction को change करके आप यहाँ पर क्या कर देना

00:11:20column wise set कर देना चीक है आपको क्या करना है इसकी flex direction आपको क्या करना है column wise set करना है तो देखो जैसे ही 760 से नीचे आएगा उसकी flex direction column wise यहाँ पर set हो गई लेकिन जो आपके home courses about contact है यह क्या आपके new items है देखो यहाँ पर देखोगे

00:11:39इसके उपर भी आपने flex लगा रखा है by default क्या लग रही है इसके उपर flex direction row wise लग रही है तो मैं यहाँ पर आके बोलूँगा कि मेरे पास जो new link है अपने पास उसको आपको क्या करना है उसकी flex direction भी आप यहाँ पर क्या कर देना column wise set कर देना

00:11:56दूनू की मैंने set करी एक तो अपने किसकी set करी अपने यहाँ पर इस चीज की और दूसरी इस चीज की अपने set कर दी एक काम और करते है मैं यहाँ पर बोलता हूँ gap अपन create कर देते सब की बीच में मैं बोलता हूँ gap create कर देना और gap आप 10 pixel का लगा देना यह नव बार पर �

00:12:26अब अगर आप आके जख करोगे, तो आपकी निवबार इस तरीके से आ रही है।

00:12:30जैसे आप 7.68 pixel से उपर जाओगे, जैसे 7.61 पर मैं आ जाओँगा।

00:12:35इससे नीचे जाते ते को इस तरीके से आपकी निवबार रहीगी।

00:12:38और जैसे अपन 760 पिक्सल से उपर जाएंगे,

00:12:41तो आपकी निवबार इस तरीके से सैट हो जाएगी,

00:12:44ठीक है, तो ये अपने अपनी मीडिया क्वेरी लगाई है,

00:12:47मैंने एक ब्रेक पॉइंट यहापर लगा दिया,

00:12:49760 पिक्सल के उपर,

00:12:51कि इस ब्रेक पॉइंट के उपर,

00:12:54आपको क्या करना है,

00:12:55उसकी फ्लैक्स डाइरिक्शन यहापर चेंज करनी है,

00:12:58तो जैसे ही मैं यहापर कर रहा हूँ,

00:12:59तो इसकी फ्लैक्स डाइरिक्शन यहापर क्या हो रही है,

00:13:01चेंज हो रही है, ठीक है,

00:13:02अब आप देखते हो कि

00:13:04यहाँ पर जैसे ही

00:13:07अपन 760 पिक्सल से नीचे जाए तो

00:13:08यहाँ पर एक बटन आ जाता है उस बटन पर

00:13:10क्लिक करने पर मेरे को यह सारी चीज़ दिखती है

00:13:12यह होगा जावा स्क्रिप्ट के थ्रू क्योंकि

00:13:14क्लिक का काम है फंक्शनिटी का काम है

00:13:16यह अपन जावा स्क्रिप्ट के थ्रू करेंगे

00:13:18तो यह अपने लगाए अपने

00:13:20यहाँ पर क्या अपनी मीडिया क्वेरी

00:13:22अपने लगाई है मतलब breakpoints अपन

00:13:24यहाँ पर सैट करते कि कि किस breakpoint पर

00:13:26आपको क्या करना है ठीक है तो यहाँ पर मैंने सिर्फ अपने

00:13:29breakpoint यहाँ पर set कर दिये ठीक है और एक ही breakpoint लगाया अपने

00:13:33760 pixel media query एक बार मैं वापस explain करूँ आपको अच्छे से कि

00:13:37किस तरीके से use करते हैं अलग से topic लेंगे अपन media query का

00:13:41हर एक breakpoint अपन बनाएंगे तो आपको और clarity मिलेगी ठीक है यहाँ तक की

00:13:51चीज के लिए रहे आप सभी को अगर यहाँ तक की चीज के लिए रहे तो एक बार

00:13:54कमेंट करके बताओ यहाँ तक की चीज के लिए रहे इसमें कोई doubt नहीं है

00:13:57यहाँ तक की चीज के लिए रहे तो एक बार कमेंट करके बताओ यहाँ तक की चीज के लिए रहे

00:14:14कोई doubt नहीं है

00:14:15सर 1280 से ज़्यादा का भी desktop होता है यह बिलकुल होता है तो अपन यहाँ पर 1280 लास्ट है फिर उसके बाद जो आपने बनाई है वो उसी format में दिखेगी आपकी जो website है फिर कितने बड़े display में देखो उसको कोई दिक्कत नहीं आईगी

00:14:36क्योंकि आप वहाँ पर उसकी width और height set करके रख दोगे maximum width और maximum height जो भी रखनी है उसे साब से वो set हो जाएगी

00:15:06झाल

00:15:36खीक है तो चलो अब अपन यहाँ पर एको टॉपिक अपन यहाँ पर डिसकस करते हैं अपने

00:15:52CSS का दीरे दीरे अपन आगे बढ़ता है इसके अंदर क्योंकि इस वीक के अंदर अपन अपना

00:15:57complete CSS पर लेंगे जो भी CSS है क्योंकि आज Wednesday, Thursday and Friday ठीक है हो जाएगा नहीं होगा तो एक दू दिन आगे और चला जाएगा फिर प्रोजेक्ट बनाएंगे अपन अपना

00:16:07अब देखो यहाँ पर अपन डिसकस करते हैं अपने position के उपर कि अपनी position प्रोपर्टी यहाँ पर क्या होती है

00:16:13अब देखो position नाम से ही के लिए रहें

00:16:16CSS में position का मतलब यह है कि कोई भी element को अपने एक complete page के अंदर

00:16:23यह मेरा element है यह जो page है

00:16:25इस page के अंदर कहीं पर भी अगर आपको set करना है

00:16:29कहीं पर भी place करना है तो उसके लिए आप position यूज लेते हो

00:16:33जैसे मालो मैं यहाँ पर कोई एक box बनाता हूँ

00:16:36मैंने एक box बनाया

00:16:37इसको styling कर लो box को जल्दी से

00:16:41तो आप यहाँ पर बोलोगी dot box उसको मैंने यहाँ पर target किया

00:16:43उसको एक background color दे दिया और वो अपन दे देते हैं जैसे grey

00:16:47और मैंने width दे दी width मैंने बोल दी 200 pixel मैंने height दे दी height मैंने बोल दी 200 pixel

00:16:54ठीक है width और height अपने यहाँ पर set कर दी और यहाँ पर अपनी box shadow भी यहाँ पर देते हैं

00:17:00जैसे 3 pixel, 2 pixel और 7 pixel और मैं यहाँ पर देता हूँ एक black color की ठीक है

00:17:07तो यहाँ पर अगर आप आके check करोगे तो आपके बास एक box create हो क्या रहा है

00:17:11ठीक है और इस box को अभी के लिए आप margin भी दे दो थोड़ी सी 10 pixel की margin दे दो

00:17:19ठीक है तो इस तरीके से आपके बास आपका यह box create हो क्या रहा है

00:17:22अब मेरे को क्या करना है यह जो box है यह complete page के अंदर आपको इसको कहीं पे भी place करना है

00:17:32यह आप करोगे position की through ठीक है तो जब भी हम position use करते है तो अपने complete browser को बदाते है

00:17:40कि यार मेरे को यह element जो है उसका normal flow ना रखके अपन क्या चाते है कि मेरे को इसको कहीं पे set करना है

00:17:48किस जगे set करना है वो अपन यहाँ पर अपने position की through करते हैं तो यहाँ पर position property के अंदर values आती है अलग-अलग

00:17:57एक आती है static एक आती है relative एक आती है absolute एक आती है fixed एक आती है अपने पास sticky

00:18:03हर एक value का अलग-अलग मतलब है

00:18:06static क्या काम आती है

00:18:08relative क्या काम आती है

00:18:10absolute क्या काम आती है

00:18:11fixed क्या काम आती है

00:18:13और sticky क्या काम आती है

00:18:14तो अपन एक-एक चीज के उपर discuss करते हैं

00:18:17तो सबसे पहले मैं यहाँ पर

00:18:19इस box के उपर position जो मैं लगा रहा हूँ

00:18:21वो position में यहाँ पर लगा रहा हूँ

00:18:23अपनी static

00:18:23कौन सी लगा रहा हूँ

00:18:26static position में यहाँ लगा रहा हूँ

00:18:27तो मैंने यहाँ पर अपनी position property लगाई

00:18:30और उसके अंदर मैंने value दे दी अपनी static

00:18:32तो जैसे मैं static दूँआ

00:18:35आप यहाँ पर आके check करोगे

00:18:36कोई changes आपको यहाँ पर दिखाई नहीं दे रहे

00:18:38अब position जब भी आप लगाते हो

00:18:41किसी भी element के उपर position property लगाते हो

00:18:44तो उसके अंदर चार properties active हो जाती है

00:18:47और वो चार properties क्या है

00:18:49वो है top, bottom, left, right

00:18:52मतलब आप किसी भी element को

00:18:54top, bottom, left, right shift कर सकते हो

00:18:57place कर सकते हो

00:18:58जैसा मैंने बोला कि top से

00:19:01आप इसको 20 pixel shift कर देना

00:19:03और left से आप इसको

00:19:05100 pixel shift कर देना

00:19:07ये काम मैंने यहाँ पर किया

00:19:08ठीक है

00:19:10तो यहाँ पर अपने बोला

00:19:13कि top से 20 pixel कर देना

00:19:15ऐसा कुछ बोला मैंने

00:19:16और left से मैंने बोला 100 pixel कर देना

00:19:18लेकिन अभी भी कोई changes नहीं दिख रहा, अपन inspect करके समझते हैं इस चीज को, inspect करके मैं इस element को target करता हूँ, मैंने target किया, position अपने पास यहाँ पर क्या लगा रखी है, अपनी static, और जैसे मैं इसको यहाँ पर top से value दे रहा हूँ, यहाँ पर work ही नहीं कर रही, left भी आपका य

00:19:48जितने भी element है, वो सब normal flow के अंदर रहेंगे, जो normal flow होता है, अगर आप static लगाते हों, तो static by default होती है, उसको apply करने की ज़र होती है, क्योंकि उस पर top, bottom, left, right work नहीं करते हैं, जैसे मालों किसी भी element पर आपने position लगा रहे हैं, लेकिन आप उसको device के इसाप से उसकी position वापस

00:20:18इस भी element पर मैं लगाना चाहता हूँ, उसका normal flow हो आ जाता है, ठीक है, तो ये तो बात हो गई static की, चलो भाई static तो समझ में ही कि क्या है, second अपने relative position के उपर, ये तो मैंने लगाई अपनी static, अब मैं लगाता हूँ यहाँ पर relative, ठीक है, यहीं पर अपन लिखते हैं अपनी

00:20:48अब ही भी कोई मेर को यहाँ पर कुछ changes नहीं दिखाए दे रहा, कुछ खास changes नहीं दिखाए दे रहा, ठीक है, अब relative position क्या होती है, relative position के अंदर जो आपका element है, वो आपकी current position से, current जो आपकी अभी position है, उसके respect में अपन उसको move करवा सकते हैं, और कहा move करवा सकते हैं, top, bottom

00:21:18जो भी आपका element है, जैसे मालों यह paragraph tag है, इसकी जो initial position है, वहाँ से, उसके respect में आप उसको top, bottom, left, right shift कर सकते हूँ, तो अपना यह जो box है, इसको मैं इसके respect में, जिस position पे यह रखा हुआ है, अभी, जिस element, जिस initial position पे मेरा आ रहा है, उसके respect में मैं इसको top, bottom, left, right shift कर सकता ह

00:21:48ठीक है, और left से, मैं यहाँ पर बोलता हूँ, कि आप इसको 400 pixel यहाँ पर shift कर देना, ठीक है, यह काम मैंने यहाँ पर करा, तो देखो कुछ तो changes आए, top से भी यह shift हुआ है, और left से भी यह shift हुआ है, कैसे बता चलेगा, चलो inspect करके पन समझते हैं, इस चीच को, मैं यहाँ �

00:22:18मैं आपर इसको change कर रहा हूँ, तो देखो यह left से shift हो रहा है, क्योंकि मैं इसको minus में लेके जा रहा हूँ, plus में लेके जाँगा, तो देखो left से shift हो रहा है, चीक है, जैसे मैंने बोला कि left से आप इसको इतना shift कर देना, यह लो, 458 pixel, तो यह आपका element 458 pixel यहाँ पर क्या हो �

00:22:48respect में वो move करता है, जो भी आपकी current position होती है, उसके respect में वो relative आपका work करता है, चीक है, तो यह बात हो गई अपके पास, आपकी किस चीच की, relative position की, चीक है, जो भी आपका यहाँ पर element है, उसी के respect में यह क्या कर रहा है, move होता है, उसके बात बात करते है तो अपने absolute position की, सेक

00:23:18क्योंकि position अगर समझ में आ गई तो आप अच्छे से समझा हुए किस तरीके से use करनी है

00:23:24एस ओ एल यू absolute ठीक है तो यहाँ पर मैं लगाता हूँ अपनी position और मैंने position लगाई absolute

00:23:35अब देखो जैसे मैंने absolute लगाई तो अपना element कहा आ रहा है इस जगे अपना element आ रहा है जो अपना element है तो इस पर अपने क्या लगाई अपनी position

00:23:46absolute अब absolute का concept समझो क्या होता है absolute का concept होता है वो हमेशा अपने parent के respect में fix होता है

00:23:57ठीक है मतलब उसका जो flow चलेगा वो उसके parent के respect में चलने वाला है अब parent के respect का मतलब क्या हो गया

00:24:05कि आपने अगर कोई element ले रखा है तो उसका जो भी parent होगा उसके respect में वो move होने वाला है

00:24:12अब भी अगर मैं बात करूँ इस डीव की या इस paragraph की या इस nav tag की तो इनका parent सबका है को नभी

00:24:21body tag body tag ही है सबका parent नैव tag का भी body है paragraph का भी body है और इस डीव का भी क्या है body tag ही parent है

00:24:31तो अगर मैं यहाँ पर इसको top, bottom, left, right move करता हूँ तो यह किसके respect में move होगा यह move होगा आपके parent के respect में

00:24:40जैसे मैं यहाँ पर इसको बोलता हूँ कि आप इसको top से 10 pixel move करो

00:24:46top से कितना करो

00:24:4810 pixel

00:24:48तो देखू, top से 10 pixel

00:24:50और किसके respect में हो रहा है

00:24:51आपके body के respect में हो रहा है

00:24:54क्योंकि इसका parent कौन है

00:24:56body है

00:24:57और जैसे मालो मैंने यहाँ पर बोला

00:24:59कि आप इसको left से move करो

00:25:01200 pixel

00:25:02तो ये इसको left से move करेगा

00:25:04कितना? 200 pixel

00:25:06इसमे right भी होता है, bottom भी होता है

00:25:16पर इसको टॉप से दिया और लेफ से दिया अपनी यहाँ पर आ के चक करते हैं

00:25:20मैं इस management को target करता हूँ instead

00:25:22अब मैंने यहाँ पर इसको टॉप से जीरो कर दूँ तो किया होता दिखो एक बार मैं

00:25:27टॉप से zero कर देता हूं जैसे मैंने टॉप से 0 कर दा तो ये कहां पर

00:25:32जी शुवायार को धे अबोन पर एंब रहा है।

00:26:02तो देखो, यहाँ पर आता हूँ मैं, और इस element को मैं यहाँ पर target करता हूँ, यह जो element है, top से 10 pixel है, मैं इसको करता हूँ, top से कितना, 0 pixel, यहाँ पर top से क्या कर दिया, 0 pixel यहाँ पर कर दिया, अभी भी यहाँ रहा है, ऐसा क्यों,

00:26:18यह spacing किस चीच किया रही है, अच्छा margin लगा रखें कि अपने इस पर, इस box पर margin लगी भी होगी मेरे साब से,

00:26:39इस box पर margin लगा रखें पर ने 10 pixel की, यह margin की वेज़े से हो रहा है, margin को हटा दो, अब आपको थोड़ा सा और clarity चीच के अंदर,

00:26:49मैं margin अटा देता हूँ के लिए, अब देखो मैंने टॉप से बोला 10 pixel, अब मैं इसको change करता हूँ,

00:26:55और मैं बोलता हूँ, टॉप से एक बार के लिए 0 करो, तो जैसे मैंने 0 करा, तो यह body बे जाके चिपक गया,

00:27:00क्यों, क्योंकि position absolute आपकी कहती है, कि आप यहाँ पर जो आपका element है,

00:27:08उसको अगर आप move करना चाते हो, तो वो हमीशा parent के respect में क्या होगा,

00:27:18उसका जो भी parent होगा, उसके respect में fix होगा, relative क्या कहती थी, relative कहती थी कि आपका,

00:27:25यहाँ पर मैं लगाता हूँ relative, मैंने क्या लगाई relative, और relative लगा के मैंने यहाँ पर बोल दिया,

00:27:32टॉप से आप इसको 10 pixel रखो, यह relative लगा के आपने बोल दिया, और left से 200 pixel आप यहाँ पर इसको रख लो, तो relative अपना यही है, अब मैं यहाँ पर आके इसको change करता हूँ,

00:27:55आपका element कहा जा रहा है, left side पूरा चिपक रहा है, और top side पूरा चिपक रहा है, क्यों, क्योंकि आपने इस पर margin और padding zero कर रखी है, इसलिए यह top और left पर आप जाके चिपक रहा है, अब यह किसके respect में चल रहा है, यह चल रहा है, जहाँ पर उसकी current position है, उसके respect में move कर रहा ह

00:28:25क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों, क्यों

00:28:55ठीक है, यहाँ तकी चीज के लिए रहे, चलो आगे चलते हैं, अब देखो मैं यहाँ पर एक थोड़ा सा चेंजिस करता हूँ, और वो चेंजिस मैं यहाँ पर क्या कर रहा हूँ, यह बॉक्स पर अपने देखा, अपनी रिलेटिव भी देखा, सारी चीज़े अपने देखी

00:29:25ठीक है, और उसके अंदर अपने पास अपना एक चाइल बॉक्स भी है, ठीक है, एक बॉक्स है, जिसके अंदर उसका चाइल बॉक्स भी है, इसको इस्टाइल करता हूँ, मैंने बोला कि मेरे पास जो डॉट न्यू बॉक्स है, उसको मैंने यहाँ पर टारगेट किया, उस

00:29:55और हाइट मैंने या पर सेट कर दी 700 जब एक और मार्जिन में यहां पर कर देता हूं इसकी ओठों ताकि वो सेंटर में आजाए यह काम मैंने यहां पर किया किस के ऊपर उस बॉक्स के ऊपर ठीक है यह बॉक्स अपने पास की यह टो गया रहा है तोड़ा से चोटा कर लो इस

00:30:25अब देखो, मैं ने इसके अंदर एक और बॉक्स बना रहा है, child box, मैं इस child box को भी मैं customize कर लिता हूँ, मैं बोलता हूँ कि मिरे पास जो child है, उसको मैंने target किया, उसको एक background डिया, brown background कलर मैं यह आपर दे दिया

00:30:38और उसकी width अपने set कर दी मैंने बुला कि आप इसकी width 80 pixel रख लेना

00:30:44height अपने यह आपर set कर दी वो मैंने कह दिया 80 pixel रख लेना

00:30:47और जो border है वो आप create कर देना 4 pixel की solid और black color की border create कर देना

00:30:55बस इतना सा काम कर लेना आप इस box के अंदर

00:30:57मतलब यह main div है और यह आपका child div है ठीक है इतना सा काम मैंने यह आपर करा

00:31:03अब मैंने position absolute क्या बताई आपको कि position absolute आपके parent के respect में काम करती है

00:31:10ठीक है और यही काम मैं अगर इस child के उपर लगाता हूँ अपनी position

00:31:15मैंने child के उपर लगाई अपनी position और कौन से लगाई absolute और मैंने बुला कि आप इसको top से 90 pixel shift करो और left से आप इसको 300 pixel shift कर दो

00:31:28top से 90 pixel और left से 300 pixel shift कर दो ये तो बाहर चला गया box से

00:31:34क्या ये box से बाहर जा रहा है ये इस बिल्कुल box से बाहर जा रहा है देखो यहाँ पर क्या हो रहा है मैं यहाँ पर आता हूँ और इस element को target करता हूँ और इसी पर मैंने लगाई position टॉप से 90 pixel मैं एक बार के लिए इसको 0 करता हूँ

00:31:48चेक तो करूँ यह position लेगा से रहा है क्योंकि मैंने absolute बता है absolute हमाईशा parent से ले ता है मैं इसको 0 करता हूँ यह तो body पह जाके चिपक रहा है और यहाँ पर भी मैं इसको कर देता हूँ

00:32:00यहाँ लोमा Details

00:32:03ये लो मैं 0 पिक्सल करते हूं उसको तो जैसे मैंने 0 करा तो ये तो body पे जाके चिपक गया और मैंने यहां पर आपको बताया कि आपकी absolute position क्या होती है हमीशा आपके parent के respect में काम करती है parent के respect में fix होती है उसी के respect में चलती है ठीक है तो यहां पर क्या हो रहा है यहां पर तो �

00:32:33तो यहां पर अब position set होनी चीथी किसके हिसाब से इस new box के हिसाब से position set होनी चीथी लेकिन यहां पर तो यह हुई नहीं रहा यहां पर यह अभी भी यह child position कहां से ले रहा है body से ले रहा है तो जब भी आप किसी भी element पे position absolute लगाते हो तो वो हमेशा position लेता है body से body को ही वो parent म

00:33:03होगा उसके उपर आपको लगानी है position relative और जो child होगा उसके उपर आप लगाओगे absolute तो अब ये जो child है ये इस new box इस parent के respect में हमीशा move होगा देखो चेक करो अब अगर आप देखोगे तो आपका element यहां पर आ रहा है और ये किसके respect में चल रहा है ये चल रहा है आपके इस parent �

00:33:33पर और मैंने यहां पर बोला zero pixel तो कहां पर जाके चिपकरा है new box के उपर ठीक है तो यहां पर अब इसका parent कौन हो गया इसका parent हो गया new box कैसे बनाते parent जिसको parent बनाना है उसको position relative देनी है और जिसको child है उसको absolute देके आप उस parent के respect में कहीं पर भी आप move कर सकते हो वो parent के दा�

00:34:03यह आपकी boundary है आप इससे बाहर नहीं जा सकते है ठीक है तो यह बात होती है अपने पास अपनी position कौन सी absolute position की तो अपने तीन पे discuss करा static default होती है उसमें आप सब element जो भी होते हैं अपने पास वो normal flow में होते है relative की अगर अपने बात करते है तो वो जो उसकी current position होती है वहीं उ

00:34:33आप उसको adjust कर सकते हो absolute की बात करते है तो वहाँ पर वो parent के respect में fix होता है उसका जो भी parent होता है तो हमीशा initial parent किसको ले रहा है वो body को लेकिन आपने कोई container के अंदर container बनाया है और आपको जो main container है उसको parent बनाना है तो उसको relative pass करो और जिसको child बनाना है उसको absolute pass करो ठीक है �

00:35:03पोजिशन important topic है बहुत जगे काम आता है आप position के तुरू आप बहुत सारे चीज़े देखते होंगे लेकिन आपने कभी देखा नहीं notice नहीं किया जैसे मैं मिंतरा के उपर आता हूँ अगर मिंतरा के उपर होगा तो

00:35:16ठीक है अभी जैसे मैं मिंतरा के उपर आ रहा हूँ अभी पहले जैसे आपने स्क्रॉल कर रहा है स्क्रॉल करते हैं आपको एक चीज़ तो दिख रही है कि आपकी नवबा टॉप पे fixed है चलो गई

00:35:28दूसरा अगर आप यहाँ पर देख पा रहे हो तो आपके पास यहाँ पर up to 500 रुपीज off यह एक यहाँ पर कुछ बनावा और रहा है बॉक्स बनावा रहा है यहाँ पर आपके पास एक latest offer का यहाँ पर क्या रहा है bell icon आ रहा है तो यह क्या है यह position ही तो लगी वी है

00:35:39अगर आप देखोगे तो आपके पास एक latest offer का यहाँ पर क्या रहा है

00:35:43bell icon आ रहा है ठीक है तो ये क्या है

00:35:46ये position ही तो लगी भी है

00:35:48position लगा के ही तो set करें वे इनको

00:35:50तो ये किस तरीके से होंगे

00:35:52ये position के through ही होंगे

00:35:54इनको position के through ही आप set कर सकते हो

00:35:57ठीक है जैसे मालों ये image ना होके

00:36:00मैं कहता कि मेरे पास ये price crash लिखावा है

00:36:03for हर लिखावा है

00:36:05ये यहाँ पर एक content due के अंदर लिखावा है

00:36:08for him ये भी content due के अंदर लिखावा है

00:36:10तो यहाँ पर इनको कैसे set करोगे

00:36:13तो आपका जो main element है

00:36:15उसके अंदर 4 हर और 4 him को set करना है

00:36:17तो आप क्या करोगे पहले इसको position दोगे

00:36:19relative, main due को

00:36:21और ये 4 हर 4 him को आप दोगे absolute

00:36:24फिर उसके इसाब से top, bottom, left, right

00:36:25आप यहाँ पर इसको shift करोगे और set करोगे

00:36:28तो ये आपके पास आपकी position होती है

00:36:31ठीक है, यहाँ तक की चीज के लिए रहे

00:36:33तो एक बार बताओ, yes sir, यहाँ तक की चीज के लिए रहे

00:36:35इसमें कोई doubt नहीं है, क्योंकि position के अंदर

00:36:37अभी दो value हो रहे है, जो मैं आपको बताने वाला हूँ

00:37:01तक की चीज के लिए रहे है, यहाँ तक की चीज के लिए रहे है

00:37:31यहाँ तक की चीज के लिए रहे, आगे जलते है अपन इसी के अंदर

00:37:35अब देखो, यहाँ पर अपन डिसकस करते है अपने position

00:37:39fixed के उपर, fixed basically ज़्यादा तर यूज आती है

00:37:42अगर आपको इस complete viewport के अंदर किसी भी element को fix करना है

00:37:48जैसे अब भी आप यहाँ पर देख पा रहे हो, यह आपकी नयुबार उपर top पे fix है

00:37:51यह आप देख पा रहे हो, up to 500 रुपीज यह भी fixed है

00:37:55यह bell आइगन आप यहाँ पर देख पा रहे हो, यह सब fixed है

00:37:58तो अगर आप यहाँ पर किसी भी element को viewport के हिसाब से

00:38:05आपकी viewport मतलब आप इस screen पे fix करना चाते हो, इस screen के respect में fix करना चाते हो

00:38:11तो वहाँ पर आप use करते हो अपनी कौन सी position, वहाँ पर use करते हो आप अपनी fixed position

00:38:16जैसे अपन यहाँ पर set करके देखते है

00:38:18इन बॉक्सेस को एक बार के लिए मैं comment कर देता हूँ और अपनी नयवबार को वापस से uncomment कर लेता हूँ

00:38:23ठीक है, नयवबार को अपन कर देते हैं, uncomment है

00:38:27यह आपकी नयवबार है, इसको मैं कर देता हूँ, यहाँ से यहाँ तर uncomment है

00:38:33ठीक है और यहाँ पर अगर आप आके चेक करूगे तो आपके वास एक नया उबार आ रही है परफेक्ट और एक paragraph टैग में यहाँ पर ले लेता हूँ जिसके अंदर अपन लॉरेम करके

00:38:43thousand का content देते हैं thousand का गया जावे देते हैं के अपने ठीक है परफेक्ट यह काम मैंने यहाँ पर किया अब अपन यहाँ पर डिसकस कर रहे है अपने position किस के उपर fixed के उपर इसको भी मैं comment कर देता हूँ यह आपके लिए था बस यहाँ से आप देख लेना ठीक है और परफेक्ट

00:39:13यह नहीं होगा कि इसमें आपने इसको ही कर रहा है ठीक है तो यह अपने सिर्फ एक नवबार ले रखा है और एक अपना paragraph का content है जो अपने को इस तरीके से दिखाई दे रहा है ठीक है अभी जैसे मैं स्क्रॉल कर रहा हूं तो आपकी जो नवबार है वो fixed नहीं है वो जैस

00:39:43रही आपकी नवबार तो इसी नवबार को आप टार्गेट करो आपने कर रखा है टार्गेट यह रही नवबार इस नवबार को आपको fix करना है तो आप इसपर लगाओगे position और position के अंदर value यहां पर क्या दोगे fixed तो जैसे आप इसको fixed value दोगे तो आपकी नवबार top पे �

00:40:13दूसरा इसकी विर्थ खराब हो रही है नवबार की तो विर्थ यहां पर सैट करो विर्थ आप यहां पर बोल दो कि इस नवबार की विर्थ 100% रख लेना ठीक है तो इस नवबार की विर्थ कितनी रहेगी 100% तो देखो मेरे पास इस चरीके से मेरी नवबार क्या है टॉप �

00:40:4320-pixel की देता हूँ ताकि मेरा content यहापर height नहीं हो रहा है ठीक है यह सिर्फ top से देते हैं लेकिन मैंने यहापर all directions से दे दी तो यह अपनी जो नयवबार है वो top पे क्या होगी

00:40:56fixed हो गई अगर अपने को नयवबार को fixed करना है तो उसके लिए अपने इसको यूज लेते हैं क्योंकि जो अपनी position fixed है वो common जो सबसे ज़्यदा यूज आती है वो यूज आती है अपनी नयवबार की पोजिशन fixed करने के लिए या फिर किसी और element को आप fix करना चाते हो जैसे माल

00:41:26यहां पर स्क्रॉल करके आओ और यह paragraph टैग ऐसे कैसे आरा आपका ठीक है चलो कोई बात नहीं यहां पर आ जाओ और

00:41:34यहां पर मैं एक box ले रहेता हूँ जिसको मैं यहाँ पर sticker करके बोल रहा हूँ

00:41:43sticker करके मैंने यहाँ पर एक box को कह दिया जल्दी से अपन इसको create करते है

00:41:49dot sticker मैंने इसको target किया छिक है इसको एक background color दे देते है

00:41:59और वो मैं देता हूँ यहाँ पर gray background color

00:42:01width अपन देते हैं जैसे मैंने 300 pixel width देदी

00:42:04और height मैं यहाँ पर इसको देता हूँ

00:42:06जैसे मैं देता हूँ 30 pixel

00:42:07ठीके तो यह एक box यहाँ पर create के आना चाहिए

00:42:10ठीके यह अपने नवबार के बाद ही करा है

00:42:22और वो शायद इसके पीछे hide हो रहा हूँ यहाँ से अटाओ यह paragraph

00:42:28tag क्यों सही नहीं आरा आपका क्या mistake हो गई इसमें

00:42:32प्रीटियर करके देख लो कहाँ पर क्या mistake हो रही है

00:42:36सही है इसने सही कर दिया इसको ठीक है तो यहाँ पर आओ और

00:42:52मैं इस paragraph tag को एक बार के लिए कर देता हूँ close ताकि

00:42:57scroll ना करना पड़े और आपने यहाँ पर अभी बनाएक sticker यह आपका

00:43:03nav है यह sticker अपने को यहाँ पर बनाना इस paragraph tag के बार बात बना ले तो

00:43:08मैं यहाँ पर कर देता हूँ ना sticker ठीक है एक box अपन यहाँ पर

00:43:14बनाते sticker करके तो अगर आप नीचे आओगे तो यह sticker करके यह आपका box यहाँ पर आ रहा है ठीक है अब

00:43:21इस box को मेरे को यहाँ पर set करना है यह तो उपर ही बना लो इसको इसके उपर ही बना लेते हैं यहाँ पर ही लगा तो मैं ठीक है वो आ रहा है लेकिन वो उस नेवार के नीचे आ रहा है ठीक है अब मेरे को क्या करना है मेरे को उसको यहाँ पर set करना है इस जगे इसकी जैस

00:43:51इसकी position में यहाँ पर कह देता हूं कि आप यहाँ पर क्या कर देना,

00:43:55fixed कर देना, ठीक है, फिर उसके बाद मैं यहाँ पर इसको बोलता हूं,

00:43:59कि आप उसको top से shift करो, और top से कितना shift करो, अभी के लिए 60 pixel यहाँ पर shift करके देखो,

00:44:05कितना वो आ रहा है तो दो को यहाँ पर नीचे आ गया वो इंस्पेक्ट करो और चेक करो

00:44:09मैंने यहाँ पर बुला 60 पिक्सल यहाँ पर इस ऐलिमेंट को टारगेट करो

00:44:12और आपने बुला 60 पिक्सल ये लो मैं यहाँ पर इसको चेंज करता हूँ

00:44:17कितना मिरे को यहां पर shift करना है

00:44:19ठीक है जैसे मालो इतना पन shift करके देखते

00:44:25तो यह center में दिख रहा है 300 pixel मैं यहां पर कहता हूँ

00:44:28कि आप इसको 300 pixel यहां पर क्या करते ना shift करते ना

00:44:32ठीक है तो 300 pixel यहां पर वो shift हो गया

00:44:35परफेक्ट थोड़ा सा और शिप्ट कर लो अगर आप करना चाहते हो तो जैसे मालू मैं कहता हूं 350 कर देना आप इसको शिफ्ट अब यह जो आपने बनाया यह आपने ऐसा नहीं बनाया इसकी हाइट जाद है और विट कम है उल्टा बना दिया आप बने तो मैं हाइट विट

00:45:05आपको इसको इस साइड रखना है ऐसाइड रखने के लिए आप क्या करोगे के टौप से तो आपने 350 दे रinos thermες कि यहांप और आपको इस साइड रखन है तो आपको इस साइड रह आपको heck feelings बनाग्याम आ तक हैं।

00:45:31रहो हुम है कि position fixed किस चरीके से काम आती है तो वो पोचिशन

00:45:34fix अपने यहां पर यह आपनी apply कर ईए ठीक है तो वह अब उसकी

00:45:39पोजीशन यहां पर fix हो गई है वह यहीं पर ही रहेगा ठीक है तो यह

00:45:43बात होगा अपने पास किसी चीज के आपकी position fixed के कि

00:45:46कि अगर आपको scroll करने बे भी किसी भी चीज को fix रखना है तो वहाँ पर आपकी position fixed काम आती है ठीक है अब देखो एक ओर चीज अपने यहाँ पर discuss करते हैं और वो है आपके पास position sticky

00:46:00अब देखो position sticky आपका जो यह fix है इसी का mixture होती है यह देखो किस तरीके से position sticky अपने पास काम आती है जैसे मालो आप चाहते हूं कि scroll करने के बाद मैं चाहता हूं कि जैसे मालो यह lorem का content अपने लिख रखा है और यह बहुत ज्यादा लिख दिया अपने content तो मैं इसमें से थो�

00:46:30कि नीचे आजाओ जल्दी से थोड़ा सा बहुत ज्यादा content लिख दिया कि अपने कि कि इतना content लिख दिया है इसे मैंने

00:46:47ठीक है जैसे मैं यहां से यहां तक content अटा देता हूं यह मैंने अटा दिया यह से एक paragraph टैग है जिसमें इतना सा content है यहां पर आओगे यह content इतना सा है ठीक है ऐसे ही अगर आप यहां आते हो तो आपके पास एक और pre-tag है pre तो मतलो pre-tag ही लेलो आप तो

00:47:15ठीक है और उसके अंदर भी मैं यहां पर lorem करके जैसे hundred का content लिखतेता हूं ठीक है और इसी के बीच में एक box है मैं इसको कहाँ देता हूं container ठीक है और इस container को मैं यहां पर कर लेता हूं target यह जो container है इसको मैं यहां पर कर लेता हूं

00:47:45रखो इसकी 100% हाइट आप यहाँ पर रखो इसकी 40 पिक्सल बैग्राउंड कलर में हैं आप पर करता हूं आप रखो इसका ग्रीन इतना सा काम करूं क्या हो रहा है वहाँ पर चेक तो करूं तो आप जैसे स्क्रॉल कर रहा हूं तो आपके पास एक कंटेनर आ रहा है यह एक ल

00:48:15लेकिन मैं चाहता हूं कि जैसे ही मेरा ये वाला कॉंटेन्ट स्क्रॉल हो इस कॉंटेन्ट को थोड़ा सा इंक्रीज करो इस वाले को इंक्रीज करो कॉंटेन्ट को तभी अपन समझ पाएंगे जैसे लारेम करके जैसे मैं यहाँ पर 100 का कॉंटेन्ट और दे रहता हूं ठी

00:48:45sticky हो जाना चाहिए, मतलब

00:48:47fixed हो जाना चाहिए, ये

00:48:49combination है, ठीक है, combo है

00:48:51आपका fixed का और दोनों का

00:48:52relative और fixed दोनों का ये mixture है, देखो

00:48:55किस तरीके से, मैं चाहता हूं कि

00:48:57जैसे ही मेरा ये वाला

00:48:59content scroll हो

00:49:01तब आपका ये element

00:49:03sticky हो जाना चाहिए और कहां पर

00:49:05sticky हो जाना चाहिए, वो आप value खुद दोगे

00:49:07जैसे मैं यहाँ पर बोलता हूं

00:49:09कि मेरा ये जो container है

00:49:11इसकी position मैंने

00:49:13यहाँ पर क्या दे दी, sticky

00:49:14मैंने बोल दिया, sticky आप कर देना

00:49:17अब जैसे आप इसको position sticky दोगे

00:49:19तो देखो, जैसे आप इसको scroll कर रहो

00:49:21वो scroll होके चला गया, ठीक है

00:49:22अब sticky कहां से करना है

00:49:25sticky आपको करना है, इस जगे

00:49:27इस new bar के बाद वो sticky हो जाना चाहिए

00:49:29पहले new bar को देखो कि

00:49:31आपने new bar को space कितना दे रखा है

00:49:33ठीक है, मैं यहाँ पर देखता हूं

00:49:35कि मेरी जो new bar है, उसको मैंने यहाँ पर

00:49:36space दे कितना रखा है

00:49:38तो new bar को आपने

00:49:40padding दे रखी है, top और

00:49:42bottom की 15-15 pixel की

00:49:44ठीक है, और जो new bar की

00:49:47height है, वो यहाँ पर अपने पास

00:49:48अभी कुछ ही नहीं है

00:49:4915-15 total कितना हो गया आपने पास

00:49:5213 pixel

00:49:55ठीक है, 30 pixel हो गया

00:49:57तो अपने एक काम करते है

00:49:58मैं यहाँ पर बोलता हूँ

00:50:00कि आप इसको sticky कर देना

00:50:01और sticky कितना करना है, top से

00:50:0330 pixel का sticky कर देना

00:50:05ठीक है, top से क्या करना है

00:50:0730 pixel का sticky, तो देको जैसे

00:50:09मैं इतना content scroll करूँगा

00:50:1130 pixel का sticky हो जाएगा

00:50:1330 pixel भी अपने सही measure नहीं गया, इसको change करो

00:50:15एक बार के लिए, जैसे मैं यहाँ पर आके change कर देता हूँ

00:50:18और मैं इसको थोड़ी सी size को बढ़ा ही रखता हूँ

00:50:22और इस position sticky पे मैं बोलता हूँ

00:50:24top से कितना रखना है आपको, top से आप इसको कर देना

00:50:2870 pixel, ठीक है, तो top से आप इसको

00:50:3370 pixel के उपर क्या कर देना, sticky कर देना

00:50:36तो देखो sticky आपका यह हो जाएगा

00:50:38देखो जैसे ही, जैसे ही मेरा यह वाला content

00:50:42scroll होगा, वो 70 pixel पे sticky हो जाएगा

00:50:45मतलब यह वाला container आपका sticky हो गया

00:50:47तो sticky यह काम आता है, fix तो आपने fix कर दिया

00:50:51पूरे अपने viewport के अंदर, लेकिन sticky

00:50:53आप किसी particular content के

00:50:55scroll होने के बाद

00:50:56आप उसको relative और fix के combination में डालना चाते हो

00:50:59तो वहाँ पर आप क्या करोगे

00:51:01अपनी sticky position आप लगाओगे

00:51:04जिसके तुरू आप उसको sticky कर सकते हो

00:51:05तो जैसे मैंने इसको यहाँ पर scroll करा हो

00:51:07sticky हो गया, ठीक है

00:51:08तो यह बात होगे अपने पास किसकी अपनी position

00:51:11sticky की, तो आज अपने

00:51:13discuss करा अपने positions के उपर

00:51:15चार, नहीं, पांच value अपने देखी

00:51:18पहली अपने देखी

00:51:19static by default apply होती है

00:51:21दूसरी अपने देखी relative

00:51:23वह अपनी current positions के

00:51:25respect में move होती है

00:51:27absolute हमीशा parent के respect में

00:51:29वह move होती है

00:51:30और body को ही वह लेती है, लेकिन अगर आप

00:51:33किसी को parent बना चाते हो, तो उसको relative

00:51:34pass करोगे और child को absolute

00:51:36pass करोगे

00:51:37fix position काम आती है, आपके

00:51:40screen के respect में आप उसको कहा

00:51:42fix करना चाते हो, जैसे मैंने अभी दू चीज़े

00:51:44fix करी screen के respect में एक तो

00:51:46nav bar को, दूसरा मैंने इस box को

00:51:48ठीक है, यह जो sticker box मैंने यहाँ पर बनाया

00:51:50ऐसे ही अगर अपन बात करते है

00:51:53अपनी sticky की, तो sticky काम आती है

00:51:55scroll के time में आप

00:51:56relative और fix दोनों का

00:51:58यहाँ पर mixture लगाना चाते हो, तब

00:52:00अपने पाद अपनी sticky काम आती है

00:52:02मतलब किसी content के scroll होने पर

00:52:04आप किसी भी element को fix करना चाते हूं

00:52:06ठीक है, मैंने बोला कि यार यह content है

00:52:09यह relative content है, यह जैसे

00:52:10scroll हो, इस relative content के

00:52:12scroll पर आपको इसको fix करना है

00:52:14तो उस relative content के

00:52:16respect में, जैसे Terror हो यह

00:52:20fix जो रहा है और top से जितना पन fix कर रहा है

00:52:22fix हो रहा है

00:52:23ठीक है तो यहां तक की चीज के लिए रहे

00:52:26तो एक बार comment करके बताओ यसर यहां तक की

00:52:28चीज के लिए रहे इसमें कोई doubt नहीं है

00:52:30किसी को

00:52:30क्योंकि यह अपना position वाला

00:52:34यहां पर काम complete होता है

00:52:47ठीक है

00:52:48तो I hope कि आपको समझ में आए कि

00:53:02क्या होता है static relative absolute

00:53:04ठीक है तो इसके basis पे आपके

00:53:16आज के कुछ task है

00:53:17और वो क्या है वो मैं आपको बताता हूँ

00:53:27आज के आपके task है उसी में आते है पन अपने task वाले के उपर ही

00:53:31और आज का आपका task है यह है

00:53:55क्योंकि आपने position को पढ़ लिया है और position को पढ़ लिया है तो यह task आप easily बना सकते हो यह एक card है जो आपको यहाँ पर बनाना है अब किस तरीके से इस card को बनाओगे मैं आपको explain कर देता हूँ थोड़ा सा आपको एक div लेना है आपका main div रहेगा ठीक है परफेक्ट कोई द

00:54:25तो यहाँ पर promoted का एक क्या लेना है प्रमोटेड का आपको एक div बनाना है इतना चोटा उसके अलावा आपको यहाँ पर 50% of up to 100 का एक div बनाना है और उसी div के अंदर आपको 38 minute का एक div बनाना है same UI फिर उसके बाद आपको इस parent div के respect में यह जिसके अंदर आपने background image लगाईए

00:54:558 minute वाले को set करना है किसके respect में इस parent के respect में इसका मतलब आप इसको relative दोगे और यह जितने भी child है उन सबको आप absolute position देके set करने वाले हो फिर उसके बाद आपको एक content लेना है center point restaurant लिख सकतो easily North Indian Chinese फिर उसके बाद आपको एक HR tag लेना है जिसके तुर आप line बनाओगे फिर उस

00:55:25दिव के अंदर क्या लोगे दो डिव क्योंकि एक डिव के अंदर आपकी लगेगी यह max safety delivery वाली image और दूसरे डिव के अंदर लगेगी followers all max safety measures to ensure your food is safe और इन दोनों यह जो main डिव है इसके उपर लगेगा display flex तब ही यह एक दूसरे के

00:55:44मतलब तभी यह दोनों एक ही line के अंदर आएंगे जब आप इस पर display flex लगाओगे तो यह आपका आज का task है और बिलकुल मैं उमीद करता हूँ आप सभी से आप बिलकुल same UI मिर को बना के लाके दोगे कल class के अंदर यह चोटा सा task है जो आपको आज करना है और यही है आज क

00:56:14तो यह आपका ultimate task है सर absolute और relative कौन से case पे लगा देखो relative लगती है अगर आपको किसी भी element को उसी जिस initial position पर वारा उसी के respect में अगर move करना है तो relative लगीगी absolute अगर आपको parent के respect में move करना है तो absolute लगीगी

00:56:44सब प्रोग्राम short में बताएंगे short में ही बताया है मैंने उसके अलावा मैं आपको बता दू attendance का point one और attendance के point one के अंदर आपको mention करना है

00:57:07position ठीक है attendance के point one के अंदर आपको mention करना है position यही attendance का point one है

00:57:17यह आपके attendance का point one है जिसके अंदर आपको mention करना है position

00:57:28अंदर आपको अंदर आपको करना है position

00:57:38सर इफ box one box two box three होगा तो कैसे लेंगे position

00:58:00अच्छा box one के अंदर box two ले रहो box two के अंदर आप box three ले रहो और box three के अंदर box four है ठीक है

00:58:07लेकिन position किस की set करना चाते हो आप box one की, two की, three की या four की

00:58:14कौन से box की position set करना चाते हो

00:58:18अच्छाए अच्छाए आपको

00:58:30अच्छा आप box two की position set करना चाते हो आथो box one को relative दे दो अगर box two की करना चाते तो box one की relative दे दो

00:58:40और box three को absolute दो और box two को भी absolute दो, main parent को relative दे दो

00:58:48main parent को relative दे दो और उसको absolute देके वहाँ पर use कर लो

00:58:54sorry आशीश मैं आपके voice mail को open नहीं कर सकता क्योंकि allow नहीं है यह

00:59:02और कोई doubt किसी का तो यह आपकी attendance का point one है जो आपको attendance के form के अंदर point one के अंदर fill करना है

00:59:1825th Christmas को अपनी class नहीं होगी और 31st New Year की आने की

00:59:36खुशी में class नहीं होगी और first New Year होने की खुशी में class नहीं होगी तो 25, 31st और एक तारिक यह तीन दिन class नहीं होगी उसके लावा Saturday Sunday अपनी class नहीं रहती वो तो आपको पता है ठीक है

00:59:51इसी के साथ attendance के point two के अंदर आपको fill करना है fixed

01:00:05attendance के point two के अंदर आपको fill करना है fixed यही attendance के point one और point two है जो आपको form के अंदर point one और point two के अंदर fill करना है

01:00:19चुलो अगर किसी को भी कोई doubt नहीं है तो आज की class अपन इतनी रखते हैं मिलते हैं फिर अपन अपन अपनी next class के अंदर ठीक है

01:00:26ओके thank you so much guys यहां तक ही practice करना और जो task दिया है उसको complete बनाना फिर मिलते हैं अपन अपनी कलवाली class के अंदर

01:00:35बाइबर आवर्यवेन और take care all good night