CSS Course | CSS Position Property | Complete Web Development Course Beginner to Advance Tutorial 21
Summary
TLDRThe video script discusses the importance of understanding CSS positioning properties for effective web design. It covers various position values like static, relative, absolute, fixed, and sticky, demonstrating how they affect the layout of web elements. The script provides practical examples, including creating a fixed navigation bar and manipulating element positions to enhance user experience. It also touches on the z-index property for stacking elements and encourages viewers to apply these concepts in their own web projects.
Takeaways
- 😀 Positioning properties are crucial for correctly placing different elements within a website.
- 📚 The 'position' property in CSS is essential for controlling the layout of elements on a webpage.
- 🔍 Elements can have different behaviors like scrolling independently or being fixed in place, which is controlled by the 'position' property.
- 🎨 There are several values for the 'position' property, including 'static', 'relative', 'absolute', 'fixed', and 'sticky'.
- 📐 The 'static' position is the default, and elements with this setting do not move even when scrolled.
- 🔄 'Relative' positioning places an element in relation to its normal position, allowing it to move within the parent container.
- 🔒 'Absolute' positioning takes an element out of the normal document flow and positions it in relation to the nearest positioned ancestor.
- 📍 'Fixed' positioning places an element relative to the browser window, making it stay in the same place even when the page is scrolled.
- 🍃 'Sticky' positioning is a hybrid of 'relative' and 'fixed', where the element sticks to a certain position on the page as you scroll.
- 🛠️ Understanding and using the 'position' property effectively can greatly enhance the layout and user experience of a website.
- 🔑 The 'z-index' property also plays a role in stacking elements on top of one another, especially when combined with positioning.
Q & A
What is the main topic discussed in the script?
-The main topic discussed in the script is the concept of positioning properties in web design, specifically how to properly position different elements within a website.
What are some common issues with website elements that the script aims to address?
-The script aims to address issues such as elements that scroll while others do not, and how to fix the positioning of various website elements to achieve the desired layout.
What is the default value of the position property in CSS, and what does it mean?
-The default value of the position property in CSS is 'static', which means that an element is positioned according to the normal flow of the document (it is not shifted from its original position).
What are the different values of the position property mentioned in the script?
-The script mentions 'static', 'relative', 'absolute', 'fixed', and 'sticky' as different values of the position property.
How does the 'relative' value for the position property affect an element's position?
-The 'relative' value positions an element relative to its normal position, allowing it to be shifted from the document flow without affecting the position of other elements.
What is the purpose of the 'absolute' position value?
-The 'absolute' position value positions an element relative to its nearest positioned ancestor, if any; otherwise, it positions the element relative to the initial containing block.
How does the 'fixed' position value differ from 'absolute'?
-The 'fixed' position value positions an element relative to the browser window (or the nearest scrolled ancestor), meaning it will not move even if the page is scrolled.
What is the 'sticky' position value used for?
-The 'sticky' position value positions an element based on the user's scroll position. It is positioned relative to the viewport and will stick to a certain position when the user scrolls a certain amount.
What is the role of the 'z-index' property in relation to positioning?
-The 'z-index' property determines the stack order of an element, which is important when elements overlap. It does not affect the actual position of the element on the x and y axes.
How can one ensure that a positioned element does not overlap with others?
-One can ensure that a positioned element does not overlap with others by adjusting its 'z-index' property and by carefully planning the layout to avoid overlap.
What is the script's suggestion for creating a new bar in a website layout?
-The script suggests defining the height and position properties of the new bar to be 'fixed' and 'top zero', respectively, to ensure it remains at the top of the page regardless of scrolling.
Outlines
📚 Understanding Positioning Properties in Web Design
This paragraph discusses the importance of understanding positioning properties in CSS for effective web design. It explains how correct positioning can help in placing various elements within a website, such as fixed headers, scrollable content, and elements that do not scroll. The speaker uses examples like a YouTube playlist and a website's sidebar to illustrate the concept of different positioning properties, such as static, relative, absolute, fixed, and sticky. They also mention how to create a container with a specific class and style it with various properties like margin, height, and background color. The paragraph ends with a teaser for the next video, which will involve creating a dummy website with a new bar.
📐 Mastering Positioning Techniques for Advanced Layout Control
The speaker delves deeper into the positioning properties, explaining the differences between relative, absolute, and fixed positioning. They demonstrate how to manipulate an element's position using top, left, bottom, and right properties in relation to its parent container. The concept of negative values for these properties is introduced, allowing elements to move outside their parent's boundaries. The paragraph also covers how to center an element within its parent using a combination of top, left, and specific pixel values. An example of absolute positioning is given, where an element is taken out of the normal flow and placed exactly where needed, regardless of other elements. The speaker also explains the concept of fixed positioning, where an element remains in a fixed position on the screen even when scrolling.
🔄 Exploring Sticky Positioning and Its Effects on Scrolling
This section focuses on the sticky positioning property, which allows an element to stick to the viewport during scrolling until it reaches a certain point, after which it behaves like a static element. The speaker creates a new box and applies the sticky property to demonstrate how it works in relation to its parent container. They explain that as the user scrolls, the sticky element will remain in view until it reaches the parent's boundary, at which point it will become static. The paragraph also touches on the absolute positioning in relation to the root element and how it differs from relative positioning, which is always in relation to the parent element.
🎨 Applying Positioning to Create Dynamic and Responsive UI Elements
The final paragraph discusses how to use positioning to create dynamic user interface elements. The speaker talks about setting the z-index property to control the stacking order of elements, ensuring that certain elements always appear on top or below others. They also mention the use of the float and clear properties to handle the layout of elements, especially when dealing with issues like not being able to align an element to the right side. The paragraph concludes with a homework assignment for the viewers to create a layout based on a provided HTML structure, encouraging them to experiment with different positioning techniques to achieve the desired design.
Mindmap
Keywords
💡Position Property
💡Scroll
💡Container
💡Box
💡Static Positioning
💡Relative Positioning
💡Absolute Positioning
💡Fixed Positioning
💡Sticky Positioning
💡CSS
💡Viewport
💡HTML
💡S-index
Highlights
Discussing the importance of CSS positioning properties for effectively positioning different elements within a website.
Explanation of how some website elements scroll while others remain fixed without scrolling, due to different position properties.
Introduction to the concept of 'position' property in CSS and its various values like static, relative, absolute, fixed, and sticky.
Demonstration of how to use the 'position' property to fix a website's header at the top, making it remain in place even when scrolling.
Creating a container and boxes with different colors to visually demonstrate the effects of applying various position properties.
Using the 'relative' value to position elements in relation to their normal position, causing them to shift from where they would normally be.
Applying the 'absolute' value to take an element out of the normal document flow and position it in relation to its nearest positioned ancestor.
The 'fixed' value is used to position an element relative to the browser window, keeping it in the same place even when scrolling the page.
Explanation of the 'sticky' position value, which acts like a combination of relative and fixed, positioning an element based on the user's scroll position.
Creating a practical example of a webpage layout with a fixed header, side navigation, main content area, and footer using CSS positioning.
How to adjust the position of elements using top, left, right, and bottom properties in combination with the position property.
Using negative values with the top, left, right, and bottom properties to move elements in the opposite direction.
The impact of the 'z-index' property on the stacking order of positioned elements, with higher z-index values bringing elements to the front.
How to center a positioned element within its container using a combination of margin and position properties.
Tips for troubleshooting common issues related to positioning, such as overlapping elements or elements not staying in place.
The importance of considering the viewport and user experience when deciding on the position properties and values to use for different elements.
A step-by-step guide to building a CSS layout with a fixed navigation bar, main content area, and footer, demonstrating the practical application of positioning.
How to use CSS comments to organize and explain the positioning code, making it easier to understand and maintain.
The role of CSS positioning in creating responsive and adaptive web designs that work well on different screen sizes and devices.
Transcripts
बिगनर्स लेकर एडवांस साल तक पढ़ रहे हैं
आज हम बात करने वाले हैं कस के अंदर
पोजीशन प्रॉपर्टी के बारे में और ये एक
बहुत ही इंपॉर्टेंट प्रॉपर्टी होती है
इसको ठीक से समझेंगे इसकी हेल्प से आप लोग
अपनी वेबसाइट के अंदर डिफरेंट डिफरेंट
एलिमेंट्स को ठीक से पोजीशन कर सकते हो
आपने कई बार देखा होगा वेबसाइट के अंदर की
कुछ चीज तो स्क्रॉल कर रही हैं कुछ चीज
स्क्रॉल नहीं करें जैसे इस यूट्यूब के
अंदर हमारी प्लेलिस्ट ऐप इसको जाके बुक
मार्क कर लीजिएगा वैसे यहां पर आप देख रहे
हो नव बार जो है ये स्क्रॉल नहीं कर रहा
है सिमिलरली लेफ्ट में जो ये पूरा पार्ट
है ये स्क्रॉल नहीं कर रहा अगर मैं यहां
पर स्क्रॉल कर रहा हूं तो ये कैसे हो का
रहा है ये सब कुछ डिफरेंट डिफरेंट पोजीशन
की प्रॉपर्टीज की वजह से हो का रहा है ये
वाला पार्ट अलग स्क्रॉल कर रहा है ये नया
बार ऊपर फिक्स्ड हो रखा है तो ये सब मास
देख रहे होंगे की किस तरीके से ये
पोजिशनिंग कम करती है और अगली वीडियो में
हम बना रहे होंगे ऐसा कुछ जहां पर हम एक
डमी वेबसाइट बना रहे होंगे जहां पर हमारे
पास एक नया बार होगा आपने देखा होगा इस
टाइप का कंटेंट काफी बार दिखता है की एक
नया बार होता है एक साइड बार होता है बेबी
यहां पर एडवर्टाइजमेंट चल रहा है अभी मैं
आपने देखा होगा की यहां पर प्राइस लिखा
होता है किसी कोर्स का यहां पर प्राइस
यहां पर कोर्स का आपका कंटेंट होता है
यहां पर हो सकता कोई बटन हो जिससे आप
कॉन्टैक्ट कर सकते हो यूजर हेल्पलाइन नंबर
वगैरा कुछ भी हो सकता है दें आप स्क्रॉल
करोगे तो ये वाली चीज यहीं पे रहेंगे आपका
में कंटेंट्स रोड पर रहेगा एंड दें हो
सकता है कुछ देर बाद ये भी सॉल्व करने लग
जाए राइट तो आफ्टर सैम टाइम ये वाला पार्ट
भी स्क्रॉल करने लग गया और ये ऊपर पहुंच
जाए एंड दें आपका नीचे यहां पर फोटो आता
है तो ये सब चीज कैसे कम कर रही हैं ये सब
समझ रहे होंगे क्योंकि अगर आप लोग सिंपल
एचटीएमएल के अंदर लिख दोगे ना नया साइड
फुटर हेडर तो उससे कुछ होने वाला नहीं है
क्योंकि एचटीएमएल के अंदर बाय डिफॉल्ट जो
पोजिशनिंग होती है वो होती है स्टैटिक तो
पोजीशन प्रॉपर्टी को समझना जरूरी है
पोजीशन प्रॉपर्टी के अंदर और भी बहुत सारी
वैल्यू होती है आप देख रहे हो यहां पर
लिखा हुआ है डिफॉल्ट वैल्यू होती है
स्टैटिक तो बाय डिफॉल्ट सब कुछ स्टैटिक
मिला होता है लेकिन स्टैटिक के अलावा
रिलेटिव एब्सलूट फिक्स्ड एंड स्टिकी ये
चार प्रॉपर्टी और होती है जिनको समझना
जरूरी होता है तो इनको समझ रहे होंगे तो
इसके लिए तो अपने कोड के अंदर और यहां पर
कुछ कुछ टिप्स बना लेते हैं तो सबसे पहले
बनाऊंगा देव कंटेनर हम तो इसको ऐसे नहीं
मारते हैं ऐसे करते हैं
डॉट कंटेनर और इसके अंदर हम बनाएंगे
बॉक्स क्लास के यहां पर यह बैक स्पेस
वगैरा इंटर वगैरा लिखा रहे क्योंकि इसके
अंदर मैंने एक कास्ट स्क्रैनकास्ट मोड
इनेबल कर दिया हमारे एक सब्सक्राइबर ने
कमेंट करके कहा था तो यह बहुत एक अच्छा
टूल लगा मुझे जिससे की आपको समझ में आएगा
की मैं कैसे चीजे कमेंट वगैरा करता हूं तो
क्या लिख रहा हूं मैं ठीक है कमांड स्लैश
कमांड स्लैश ये सब चीज ये सब दिखती रहेंगी
आपको अगर अनाेईंग लग रही है तो बता देना
मुझे मैं हटा दूंगा इन सब चीजों को आपको
यहां पर रेड रेड कलर के ऊपर भी दिख रहा
होगा ये सब उसी की वजह से हो रहा है ठीक
है ठीक है आगे बढ़ते हैं हम यहां पर हमारे
पास एक कंटेनर है और एक बॉक्स है इन सभी
बॉक्स को मैं कुछ और क्लासेस भी दे सकता
हूं लेट्स से रेड
ग्रीन एंड
ब्लू
देते हैं कुछ कुछ तो इसको मैं हक कर देता
हूं साइड में एंड दें हमारे पास होगा एक
कंटेनर
इसकी विथ हाइट डिफाइन कर लेता है 300
पिक्सल और हाइट
और बैकग्राउंड कलर यह तीनों चीज मुझे देनी
है इनको तो मैं कॉपी करूंगा
नहीं है रेड उसको मैं रेड के लिए अलग कलर
दूंगा इसका कलर होगा रेड ठीक है
लेकिन अभी देखते हैं कैसा दिख रहा है तो
मैं इसको करूंगा
है और यहां पर हमें इस तरह इसको साइड बाय
साइड लेकर ए जाते हैं तो यहां पर हमारे
पास एक कंटेनर है ग्रे कलर का इसके अंदर
एक रेड बॉक्स है दें हम ग्रीन बॉक्स में
डालेंगे इसके अंदर तो ग्रीन
बैकग्राउंड कलर उसका हो जाएगा ग्रीन
एंड दें एक होगा हमारे पास ब्लू
उसका बैकग्राउंड कलर हो जाएगा ब्लू
तो ये हमें कुछ इस तरीके से दिखाई दे रहा
है अब एक कम और करते हैं की यहां पर अपने
कंटेनर को मार्जिन और दे देते हैं थोड़ा
सा लेट से 100 पिक्सल का तो चारों साइड ये
दूर ए जाएगा और ये भी फिलहाल कुछ इस तरीके
से दिख रहा है अब यहां पर हम कुछ-कुछ चीज
करते हैं फॉर एग्जांपल अगर मैं यहां पर
पोजीशन लिखूंगा आपको पोजीशन दिखाता हूं
पोजीशन अगर मैं कुछ नहीं लिखूंगा तो बाय
डिफाल्टर स्टैटिक होता है तो मैं अगर कुछ
भी लिखूंगा तो भी ये स्टैटिक है स्टैटिक
आपको दिख रहा होगा की कुछ भी फर्क नहीं
पड़ा लेकिन इसके अलावा अगर मैं यहां पे
लिखूंगा रेड
तो भी आप रेड को कुछ फर्क पड़ा बीपी वैसे
के वैसा ही है तो पोजीशन ऐसे कुछ फर्क
नहीं पड़ता क्वेश्चन में लिखने के बाद तो
फिलहाल रिलेटिव का मतलब है रिलेटिव तू डी
पैरेंट और पैरेंट हमारा ये कंटेनर है राइट
तो इसके रिलेटिव मैं बता सकता हूं की किधर
जाना है आपको टॉप राइट बॉटम और लेफ्ट ये
चार फुल होते हैं की इनके साफ-सा आपको
कहां जाना है तो मैं बताऊंगा इसको ठीक है
टॉप से आप चले जाओ 50 पिक्सल नीचे
ठीक है तो आप देखोगे की हुआ क्या ये जो
रेड वाला बॉक्स है ये टॉप से 50 पिक्सल
नीचे ए गया है सिमिलरली मैं इसको कर सकता
हूं लेफ्ट से 50 पिक्सल आगे
है तो आप देखोगे की लेफ्ट साइड इधर चला
गया
विचार टॉप लेफ्ट दें राइट राइट लिखकर
लिखता हूं हंड्रेड
पढ़ा नहीं तो मैं कम करता हूं यहां से मैं
लेफ्ट को हटता हूं और आपको तब दिखाई देगा
राइट कैसे कम कर रहा है तो आप देख रहे हो
राइट इसका यहां पर था रेड वाले का राइट
कॉर्नर ये था ये इस राइट कॉर्नर से 100
पिक्सल राइट साइड ए गया राइट इस राइट वाली
जगह से 100 पिक्सल राइट साइड चला गया तो
बेसिकली इसका मतलब यही होता है टॉप लेफ्ट
राइट बॉटम का की आप टॉप से कितना नीचे ए
रहे हो लेफ्ट से कितना आगे जा रहे हो राइट
से कितना इधर ए रहे हो और बॉटम से कितना
ऊपर जा रहे हो ठीक है अगर मैं यहां पर टॉप
की जगह लिख देता हूं लेट्स से बहुत कम
तो बॉटम इसका मतलब क्या हुआ की बॉटम यह
थायराइड रेड यहां पर था पहले और इसका बॉटम
यह था इससे यह 50 पिक्सल ऊपर चला गया यहां
पर नेगेटिव वैल्यू इसमें डिफाइन होती है
इसका मतलब मैं आप अगर लिखूंगा माइंस 50
पिक्सल तो क्या होगा ये बॉटम यहां था राइट
इस बॉटम से ये नेगेटिव 50 की पिक्सल मतलब
की नीचे की साइड 50 पिक्सल चला गया ठीक है
तो यहां पर आप लोग नेगेटिव कहीं डिफाइन
करोगे इसकी वजह यहां पे आप लिख सकते हो
टॉप से 50 पिक्सल राइट वो भी से कम करेगा
तो इस तरीके से आप लोग टॉप लेफ्ट राइट और
बॉटम डिफाइन कर सकते हो एक बार आपने बता
दिया की पोजीशन रिलेटिव है इसका मतलब
रिलेटिव तू डी पैरेंट मुझे कम करना है तो
इस तरीके से आप डब्बे को बाहर ले सकते हो
अंदर कहीं भी ले सकते हो इसके बाद अगर
आपको इस डब्बे को सेंटर में एलाइन करना है
तो कैसे करोगे हमें पता है ये 300/300 का
है तो मुझे करना क्या है मुझे टॉप से लेके
आना है इसे 100 पिक्सल नीचे तो मैं टॉप्स
लिखूंगा इसे 100 पिक्सल नीचे
यादव पिक्सल नीचे एंड दें मुझे लेफ्ट से
इसको ले जाना है 100 पिक्सल राइट साइड में
तो लेफ्ट से हंड्रेड पिक्सल रेड वाला
बॉक्स हमारे इस बॉक्स के सेंटर में ए गया
इस तरीके से हमारा पोर्शन रिलेटिव कम करता
है अब जरा बात करते हैं पोजीशन एब्सलूट के
बारे में तो मैं आपसे करता हूं ग्रीन को
देता हूं पोजीशन एब्सलूट
पोजीशन एब्सलूट तो यह मैंने ग्रीन को जब
क्वेश्चन
हुआ और हुआ क्या की ब्लू वाला बॉक्स गायब
हो गया तो एक्चुअली होता क्या है ना जब आप
लिखते हो पोजीशन एब्सलूट तो वो आपके
एचटीएमएल के नॉर्मल फ्लोर से बाहर निकल
जाता है और अब ये ऐसे ही बस फ्लैट कर रहा
है बीच में कहीं भी ठीक है जहां पर इसको
जगह थी जहां पर ये पहले था ये उसी जगह पे
खड़ा हो गया और ये बेसिकली ये अपने में
एचटीएमएल से बाहर निकल चुका है मैं क्या
कहना चाह रहा हूं की अगर आप इसको यहां से
हटा भी दोगे ना ये सब उसके लिए हमारा
ग्रीन बॉक्स है इसको मैं यहां से हटा देता
हूं तो मैं शो करूंगा कमेंट
तो आप देखोगे ग्रीन बॉक्स है गया और उसके
नीचे आपका ए गया ब्लू बॉक्स तो ये ब्लू
बॉक्स इस तरीके से ऊपर ए गया की कभी यहां
पर ग्रीन बॉक्स था ही नहीं मेरी बात समझ
रहे हो मैं वापस से इसको दल दूंगा तो ये
बस ऊपर रख जाएगा क्यों राखी जाएगा क्योंकि
यह पोजीशन एब्सलूट हो राखी है और पोजीशन
एब्सलूट कम करती है आपकी एचटीएमएल के साथ
ठीक है तो रिलेटिव का रिलेटिव होता है
पेरेंट्स वहीं पे एब्सलूट का रिलेटिव होता
है एचटीएमएल एचटीएमएल विच इसे डी होल
पैरेंट जो पूरा का पूरा रूट एलिमेंट है
यहां पे तो यहां पर हम इस रूट एलिमेंट के
साथ टॉप लेफ्ट बॉटम डिफाइन कर सकते हैं तो
सपोज करो यहां पर टॉप जीरो तो इसका मतलब
पैरेंट के साथ टॉप में जीरो ए चुका है ये
ठीक है और अगर लेफ्ट 0 तो आप देखोगे की जो
पैरेंट है आपका बेसिकली ये जो रूट एलिमेंट
है उसके साथ ये लेफ्ट से जीरो है और टॉप
से जीरो है इस तरीके से आप इसको कहीं भी
ले सकते हो सपोज यहां के जाना है बॉटम
राइट कॉर्नर में लेके आना है तो इसके लिए
मैं लिखूंगा
बॉटम से जीरो डिस्टेंस दूर और राइट से भी
जीरो डिस्टेंस दूर ठीक है तो राइट वाली
साइड अपने पेरेंट्स से जीरो डिस्टेंस दूर
है और बॉटम वाली साइड अपने पैरेंट के बॉटम
से जीरो डिस्टेंस दूर है इस तरीके से ये
एब्सलूट कम करता है तो ये हो गया आपका
एब्सलूट इसके बारे में भी हम थोड़ी और बात
करेंगे लेकिन आप पहले बात करते हैं यहां
पर हम फिक्स्ड वैल्यू के बारे में तो मैं
उसके लिए लिखूंगा ब्लू वाले को पोजीशन
फिक्स्ड और फिक्स पोजीशन करता क्या है ना
की इसको स्क्रीन पे इस जगह पे फिक्स कर
देगा तो आप चाहे कहीं भी स्क्रॉल कर दो ये
यहीं पे फिक्स रहने वाला है अब तो उसके
लिए मैं आपको डेमोंस्ट्रेट करने के लिए कम
करता हूं यहां पे एक बनाता हूं
देव ठीक है और
इसको मैं
स्पेशल
300
यहां पर थोड़ा स्क्रॉल करने के लिए हमारे
पास और आप देख रहे हो
इस जगह फिक्स हो गया क्यों फिक्स हो गया
क्योंकि इसकी पोजीशन मैंने डिफाइन कर दिया
फिक्स तो अब ये इधर ही फिक्स रहेगा आप
बोलोगे भैया मुझे इधर फिक्स नहीं करना
मुझे इधर लेफ्ट साइड चिपकाना है तो भी कोई
बात नहीं क्योंकि ये रिलेटिव तू डी रूट कम
कर रहा है तो यहां पर हम लिख सकते हैं
लेफ्ट
जीरो तो यह लेफ्ट साइड में इधर ए गया और
अगर मैं आप लिख दूंगा टॉप जीरो
इधर फिक्स हो जाने वाले अगर मैं कुछ भी
स्कूल करूं यह यहीं रहने वाला हूं ठीक है
नया बार बनाओ उसकी हाइट को डिफाइन कर दो
कुछ भी और डिफाइन कर दो 100% एंड दें उसकी
पोजीशन को कर दो फिक्स और टॉप में कर दो
जीरो तो ये हमेशा के लिए फिर टॉप में अटक
जाने वाला है और ये कहीं भी मिल जाएगा ठीक
है या फिर अगर आपको बनाना है कुछ ऐसा टाइप
का की आपको ऐसा कुछ बटन बनाना है जिसको आप
हमेशा फिक्स रखना चाहते हो तो इसको भी आप
हमेशा फिक्स रख सकते हो आप इसको लेफ्ट और
राइट से कुछ पेंडिंग दे दो या फिर पेंडिंग
ना देखें आप यहां पर से टॉप और लेफ्ट
डिफाइन कर सकते हो फ्रेंड्स एग्जांपल मैं
चाहता हूं ये इधर आए बॉटम कॉर्नर में है
तो मैं लिखूंगा यहां पर
50 पिक्सल एंड
राइट में
इसका मतलब यहां पर आने
जाएगा
पुरी स्क्रीन में और वो कहीं नहीं जाने
वाला है वहीं पर रहेगा हमेशा इसके अलावा
एक होता है स्टिकी अब देखते हैं जरा
स्टिकी कैसे कम करता है स्टिकी को समझने
के लिए मैं कम करता हूं एक और बॉक्स बनाता
हूं और एक नया बॉक्स बनाएंगे हम
है जिसका मैं नाम देता हूं लेट से पर्पल
और इसको हम बनाएंगे यहां पर
इसको बैकग्राउंड कलर देते हैं पर्पल और
यहां पर यह
करते हैं इस पर्पल बॉक्स को बनाते हैं
स्टिकी बनाने से होता क्या है
लेकिन जैसे-जैसे करके आप इसे स्क्रॉल करते
हो जैसी करके आपको पैरेंट बाहर निकल जाता
है आपके व्यू से तो उसी टाइम पर ये स्टिकी
वाला चीज भी अपने बाहर निकल जाता है ये
आपको मैसेज samjhaunga समझ में नहीं आएगा
लेकिन जब हम देखेंगे इसे तो आप बोलोगे ठीक
है जैसे की पोजीशन इसी की हम कर देते हैं
स्टिकी इसके बाद आपको बताना पड़ेगा स्टिक
कैसे करना है मतलब पैरेंट के हिसाब से
कितनी दूर पर स्टिक करना है तो मैं चाहता
हूं की पैरेंट तो ठीक है यहां पर है और
पैरेंट के हिसाब से टॉप से लत से 50
पिक्सल आप इसे स्टिक कर दो ठीक है तो आप
देखना
तो यहां पर स्टिक
ऊपर चला जाएगा
ऊपर की साइड वैसे वैसे यहीं पर रहेगा
स्टिक रहेगा स्टिक रहेगा एंड दें कुछ देर
बाद
चला जाएगा ठीक है तो इसी तरीके से मैंने
ये वाली चीज बनाई है यहां पर आप देखोगे इस
वाली चीज को मैं अगर यहां पर हमारा
पेस्टिसाइड इनेबल कर डन तो आप देखोगे यह
अभी तो ऊपर नहीं जा रहा अभी तो ऊपर नहीं
जाएगा लेकिन जैसे इसको यहां पर ये पैरेंट
मिलेगा पेरेंट्स नीचे से आया पैरेंट इसको
अपने साथ ऊपर लेके चला जाएगा इस तरीके से
ठीक है आपको समझ में ए रहा होगा की किस
तरीके से स्टिकर कम कर रहा है तो यहां पर
हमने स्टिकी को भी देख लिया लेकिन मैं
आपको एब्सलूट के बारे में एक और चीज बताना
चाहता हूं ये देखिए एब्सलूट बॉक्स है
हमारा ग्रीन हमने अपलोड बनाया हुआ है और
मैंने कहा था आपको की एब्सलूट कम करता है
रिलेटिव तू डी रूट वेल ये एक्चुअली सही है
नहीं ये एब्सलूट आपका रिलेटिव तू डी रूट
कम नहीं करता ये रिलेटिव तू था वो वाला
पैरेंट कम करता है जिसने अपनी पोजीशन को
रिलेटिव बना रखा है अगर ये चीज समझ में
नहीं आए तो मैं कम करता हूं आपको बताता
हूं की लत से हम अपने कंटेनर को यहां पर
बोल देते हैं पोजीशन
रिलेटिव तो आप देखोगे ये ग्रीन बॉक्स अंदर
ए गया पैरेंट के अंदर ए गया ऐसा क्यों हुआ
क्योंकि ग्रीन बॉक्स देखता है की मेरा जो
जस्ट पैरेंट है क्या उसकी पोजीशन रिलेटिव
है अगर पोजीशन रिलेटिव नहीं है तो मैं
उसके पैरेंट पे जाऊंगा और वहां चेक करूं
क्या उसकी पोजीशन रिलेटिव है अगर रिलेटिव
मिल गई तो मैं रिलेटिवली उसे कंटेनर के
हिसाब से कम करूंगा इसका मतलब अगर आपको
कोई कंटेनर मिल जाता है जिसका पोजीशन
रिलेटिव है तो उसके अंदर ये वाला बॉक्स भी
एब्सलूट नहीं रिलेटिव की तरह ही कम करेगा
ठीक है तो एब्सलूट एलिमेंट अपने पेरेंट्स
के अंदर ढूंढते रहेंगे की किसका पोर्शन
रिलेटिव है और अगर कोई मिल गया तब तो उसके
हिसाब से ये रिलेटिवली कम करेंगे अगर कोई
नहीं मिला तो एचटीएमएल तो है तो ये सब का
टॉप सबका रूट तो फिर ये उसके हिसाब से कम
करेंगे ठीक है अगर मैं यहां से हटा दूंगा
तो इसको कोई भी रिलेटिव नहीं मिलेगा
पैरेंट तो ये जो टॉप पैरेंट होता है सबका
मलिक एक विच इस एचटीएमएल उसके हिसाब से कम
करेगा ये यहां पर आपको क्वेश्चन प्रॉपर्टी
अच्छे से समझ में ए गई होगी एक कम और करते
हैं इसको ठीक से डिफरेंशिएट करने के लिए
की कौन सी चीज के अंदर हमने क्या
प्रॉपर्टी लगा राखी है मैं कम करता हूं
बॉडी
और इसको कलर देते हैं लेट से
व्हाइट और अब मैं यहां पर
लिख दूंगा रिलेटेड
का मतलब क्या होता है की कौन सा एलिमेंट
आपका किस एलिमेंट के ऊपर ए रहा है आप यहां
पर देख सकते हो फिक्स्ड आपका ग्रीन के ऊपर
ए रहा है ऐसा क्यों हो रहा है तो वेल ये
सब हो रहा है आपका स इंडेक्स की वजह से स
इंडेक्स बाय डिफॉल्ट आपका कस के अंदर इस
तरीके से कम करता है की जो आपके चिल्ड्रन
होते हैं वो आपके पैरेंट के ऊपर ए रहे
होते हैं आपने देखा ये पैरेंट हमने कंटेनर
बनाया हुआ है ग्रे कलर का तो रिलेटिव
एब्सलूट ऑफ फिक्स्ड ये सब इसके ऊपर ए गए
हैं राइट और इसके अंदर इसी तरीके से चीज
कम करते हैं एक के नीचे एक चीज से कम करते
हैं स्टैटिक पोजीशन की तरह से और अगर आप स
इंडेक्स की बात करोगे तो उसके अंदर
चिल्ड्रन पैरेंट के ऊपर ए रहे होते हैं
हमेशा ही लेकिन अगर आप इनको चेंज करना
चाहते हो आप चाहते हो की नहीं मैं चाहता
हूं कोई एलिमेंट किसी के नीचे ए जाए जैसे
आप देख रहे हो फिक्स आपका इसके ऊपर ए रहा
है मैं चाहता हूं की नहीं भाई ये ग्रीन
वाला बॉक्स ऊपर है तो उसके लिए मुझे कुछ
नहीं करना मैं आऊंगा यहां पर ग्रीन के
अंदर और मेरे को यहां पर स इंडेक्स
है और लेट सेवन
तो यहां पर एब्सलूट अपने आप ऊपर ए गया मैं
चाहता हूं
यहां पर सेट इंडेक्स थोडासा बड़ा लिख
दूंगा वैन से बड़ा
सुपर ए गया तो इस तरीके से आप लोग डिफाइन
करके बता सकते की कौन सी चीज अभी होनी
चाहिए और कौन सी चीज टुवर्ड्स डी यूजर
होनी चाहिए जिसका
ज्यादा होगी जिसका होगा वो टुवर्ड्स डी
यूजर कम होगी इस तरीके से ठीक है मैं यहां
पर डिफाइन करूंगा अगर थ्री तो वापस ग्रीन
बॉक्स ऊपर ए जाना चाहिए राइट इस तरीके से
तो ये होगा आपका स इंडेक्स और आपने देखा
पोर्शन किस तरीके से कम करता है इसके
अलावा ये मैं आपको एक होमवर्क की तरह देता
हूं ये आपका असाइनमेंट ऐप की ये इस टाइप
का लेआउट बना कर दिखाओ इस पेज का एचटीएमएल
में आपको दिखा देता हूं बाकी कस आप खुद
बनाने का ट्राई करना तो एचटीएमएल कुछ इस
तरीके से दिखता है की आपके पास एक नायब है
खाली उसके अंदर एक में है में के अंदर एक
पैराग्राफ है एक आपने दीप बना लिया है
उसके अंदर एक साइड दल दिया है एक आपके पास
है कॉन्टैक्ट वाला ये कॉन्टैक्ट वाला देबू
है जो रेड कलर का बॉक्स दिख रहा था आपको
एंड दें एक फुटर है इसके बाद तो आपको कस
बनानी है सो डेट इस तरीके से बिहेव करें
ठीक है तो यह जाओ और बनाओ और इसके बाद हम
बात कर रहे होंगे फ्लोट प्रॉपर्टी के बारे
में फ्लैट एंड क्लियर ये किस तरीके से कम
करते हैं वो भी बहुत इंपॉर्टेंट होते हैं
तो आप हो सकता है की इस बॉक्स को राइट
साइड एलॉय ना कर पाऊं लेकिन फ्लैट
प्रॉपर्टी की वजह से हम लोग इसको राइट
साइड में एलन कर पाएंगे वो हम देखेंगे
नेक्स्ट वीडियो के अंदर और साथ में आप देख
रहे होंगे की ये किस तरीके से बनता है
تصفح المزيد من مقاطع الفيديو ذات الصلة
CSS Course | CSS Display Property | inline and block elements | Web Development Course Tutorial 20
CSS Selectors MasterClass | Sigma Web Development Course - Tutorial #17
CSS Units & Sizes Tutorial for Beginners
CSS Course | Flexbox in CSS in One Video | Easy Tutorial | Complete Web Development Tutorial 24
next.js in urdu - 9 - Navbar Tutorial (Step-by-Step)
JQUERY BASIC - Pertemuan 5 Part 2
5.0 / 5 (0 votes)