Aliens School
Cinematic Knowledge Experience
0%
Aliens School
Now Playing
Aliens School ยท HIEN
โŒจ๏ธ Keyboard Shortcuts
โ†’Next slide โ†Previous slide SpacePlay / Pause MNarration on/off FFullscreen ?Show/hide this
Press any key to close
Skill Topic ยท Cinematic

๐Ÿ“ CSS Position โ€” Furniture Placement System ๐Ÿช‘๐Ÿ“

CSS Position jaise Furniture Placement โ€” static = default spot, relative = thoda shift, absolute =โ€ฆ

Overview
๐ŸŒŸ

๐Ÿ“ CSS Position โ€” Furniture Placement System ๐Ÿช‘๐Ÿ“ โ€” Quick Facts

๐Ÿ“Œ

#: Topic

๐ŸŽฏ

1: Position Overview

โšก

2: static

๐Ÿ”‘

3: relative

Topic 1
๐Ÿ“ฅ ๐Ÿ“ฅ ๐Ÿง  ๐Ÿ”ฌ ๐Ÿ’ก ๐ŸŽฏ

๐ŸŽฏ Real-World Analogy โ€” Furniture Placement ๐Ÿช‘๐Ÿ“

๐Ÿ“š ๐Ÿช‘ Imagine karo Room me Furniture rakhna: - static = Default spot โ€” jahan factory ne rakhaโ€ฆ
Topic 2
๐Ÿ’ก ๐Ÿ“Š ๐Ÿ”ฌ

๐Ÿ“Œ 1. Position Overview

๐Ÿ’ก `mermaid graph TD A["position property"] --> B["static<br>Default, normal flow"] A -->โ€ฆ
Topic 3
๐Ÿ”’

๐Ÿ“Œ 2. static (Default)

๐ŸŽฏ ๐Ÿช‘ Default spot โ€” factory position, kuch nahi hota! `css div { position: static; / Defaultโ€ฆ
Topic 4
โญ

๐Ÿ“Œ 3. relative

๐Ÿ’ก

Element ko thoda adjust karna

๐Ÿ”‘

absolute child ke liye parentโ€ฆ

Topic 5
๐Ÿ“ฅ ๐Ÿ“ฅ ๐Ÿง  ๐Ÿ”ฌ ๐Ÿ’ก ๐ŸŽฏ

๐Ÿ“Œ 4. absolute

๐Ÿ’ก

โš ๏ธ Nearest positioned parent seโ€ฆ

๐Ÿ”‘

Agar koi positioned parent nahi โ†’โ€ฆ

โšก

Element normal flow se hat jaata โ€”โ€ฆ

Topic 6
โœจ ๐Ÿ“Š ๐Ÿ”ฌ

๐Ÿ“Œ 5. fixed

โœจ ๐Ÿช‘ Wall-mounted โ€” scroll karo, wahi chipka rahega! `css / Fixed navbar / .navbar {โ€ฆ
Topic 7
๐Ÿ”’

๐Ÿ“Œ 6. sticky

๐Ÿ’ก

โš ๏ธ Parent ka overflow: hidden/autoโ€ฆ

๐Ÿ”‘

โš ๏ธ Parent ki height defined honiโ€ฆ

โšก

top value dena zaroori hai

Topic 8
๐Ÿš€

๐Ÿ“Œ 7. Complete Example

๐Ÿš€ `html <!DOCTYPE html> <html> <head> <style> * { margin: 0; padding: 0; box-sizing:โ€ฆ
Topic 9
๐Ÿ“ฅ ๐Ÿ“ฅ ๐Ÿง  ๐Ÿ”ฌ ๐Ÿ’ก ๐ŸŽฏ

๐Ÿ“Œ 8. Common Mistakes โš ๏ธ

๐Ÿ“š | # | Mistake โŒ | Correct โœ… | Explanation | |---|-----------|-----------|-------------| |โ€ฆ
Topic 10
๐Ÿ’ก

๐Ÿ“Œ 9. Practice Exercises ๐Ÿ‹๏ธ

๐Ÿ’ก ๐ŸŸข Beginner โ€” Position Basics ` ๐Ÿ“‹ Task: 1. relative se element ko 20px shift karo 2.โ€ฆ
Topic 11
๐Ÿ”’

โœ… Summary

๐ŸŽฏ | Value | Behavior | Analogy ๐Ÿช‘ | |-------|----------|-----------| | static | Default flowโ€ฆ
Diagram
๐Ÿ“ฅ โš™๏ธ ๐Ÿ”ฌ ๐Ÿ’ก

Visual Flow

๐Ÿ“Š Diagram visualization โ€” details in narration
Quick Quiz
๐Ÿง  QUIZ TIME

Quiz โ€” Question 1

๐Ÿ“ CSS Position โ€” Furniture Placement System ๐Ÿช‘๐Ÿ“ ka sabse sahi definition kya hai?

Quick Quiz
๐Ÿง  QUIZ TIME

Quiz โ€” Question 2

๐Ÿ“ CSS Position โ€” Furniture Placement System ๐Ÿช‘๐Ÿ“ ka '1' kya hai?

Complete! ๐ŸŽ‰
COMPLETE

๐Ÿ“ CSS Position โ€” Furniture Placement System ๐Ÿช‘๐Ÿ“ Complete!

Aliens School ยท HIEN ยท Cinematic Knowledge

โœ…

๐Ÿ“ CSS Position โ€” Furniture Placement System ๐Ÿช‘๐Ÿ“ Complete

1/17
0:00
REC 00:00ESC=Cancel
Aliens School
3
Recording shuru hone wali hai...
โœ…
Recording Complete
Video process ho rahi hai...
Live Class
Slide 1 / 7
Timer
00:00
๐Ÿ“ Speaker Notes
โ€”
โญ๏ธ Up Next
โ€”
โ€”
๐Ÿ—‚๏ธ All Slides