CSS Position Property | Sigma Web Development Course - Tutorial #28

[@omkarsawant9267]

Position Property determines the position behavior of the element. 1.Static which is default value. Position according to normal flow of the page and other properties like top / left / right / bottom have no effect. 2.Relative position relative to its normal position in the document flow. We can use properties like top / left / right / bottom to offset it from normal position without affecting layout of other elements 3.Absolute position relative to its nearest positioned [non static] ancestor if any available otherwise it will be positioned to its initial containing block[usually the element] 4.fixed is positioned relative to its browser window or the viewport. stay in same position even if page is scrolled. 5.Sticky is hybrid of relative and fixed positioning. it is treated as relative positioned until it crosses a specified point in the viewport during scrolling after which it is treated as fixed positioned. Real life examples of Sticky position *Commonly used for creating navigation bars that stick to the top of the page after scrolling past a certain point. *It's useful for creating sticky sidebars or elements that need to stay visible within a specific scrollable area. Note - Limitations of Sticky Position: The sticky positioning might not work as expected in certain cases, especially if the parent container or ancestor elements have certain CSS properties like overflow set to hidden or transformations applied.

[@profit_minds]

I had no motivation to watch today but somehow I came here again. Continuously learning from 4 days have watched 27 #tutorials so far #sigmaop Edit1: While working in a MNC as Customer service role managing to study continuously. I'm happy motivated fired up all at same time Edit2: 6th day roday continuous learning completed 42 videos so far

[@GhinaKhan-v4z]

I'm also looking for a customer service role, while studying along with this course, but facing rejections from everywhere. It's tough.

[@profit_minds]

@@GhinaKhan-v4z it's hard to get wfh these days. And the mnc I'm in is cutting costs right now. So try to get a part time job in tech Mahindra or Genpact. Maybe you can get into the concentrix or teleperformance too. Revolut is also emerging these days.

[@GhinaKhan-v4z]

@@profit_minds true tho..ah thank you, i'll try these companies for sure

[@nirmaljitsingh2616]

Harry bhai's consistency is on next level unmatchable keep it up ❤ great Harry

[@nirmaljitsingh2616]

Yes finally got a heart by harry bhai

[@sneharani6446]

Sir aapne toh exponentially raise kr diya bar iss video mei 🤯🤯🤯🤯

[@sandhyawadhwa6963]

My 40th Birthday is on 14th NOV. Proudly learning Web development because i have been learning it (on and off) since 2019 ( had enrolled myself in one of the institute as well ) but did not get proper guidance. I have learnt many things and made notes through w3c school and different videos. Have learnt, practiced and converted 5-6 pdfs into html. Need to learn Programming and i don't want to leave my dream to being a web developer and want to make my own website as a project so that being a yoga instructor I can able to share my knowledge on my platform. Thank you from bottom of my heart Harry for this amazing course. Soon hopefully I become web developer and have a stable earning.

[@manrajcheema3418]

wow maam that's amazing! Do share the website name and details once you are done. Best of luck

[@Nikii123-y2z]

😢😢🎉😂😂

[@MonaliJadhav-mo5cp]

God bless u 😊

[@animewaves__]

update?? 8 months have passed any progress>>??

[@arjukumbhakar9398]

A LONG WAY to gooooooo🔥🔥

[@MuhammadAbdullah-qg7kl]

salute to u harry sir jo cheez 2 hour class mein smjh ni aye wo apny minto mein smjha diya

[@AvengeAbdullah]

Summary : Relative - Apni orginal position se change hogi Absolute - apne parent ke relative position change hogi Fixed - page mein position fixed hojaygi Sticky - page mein kahin bhi ho, scroll krne pr neeche nhi jaygi, stick hojaygi

[@AliHamza-hi3zy]

Thanks Bhaya

[@it_biswadiproy3675]

absolute : apne nearest ancestor positioned parent k relative change hoga***

[@dhirenradhanpura4084]

Par position absolute kiya to left 34px diya to position overflow kyun hua ? parent ke andar hi rehna chahiye tha na ?

[@CODERBEY]

Create Beautiful Modern Login Page Using HTML and CSS kzbin.info/www/bejne/hmGyYp2grN-WgLM

[@KarachiOnly]

Parent ko position : relative krdo pir nahi jyega bahir

[@Pankaj9020]

static-box ki Bydefault position static hoti h. static property me aap top, bottom, left, right ka use nhi kar sakte uske lie position static se hatana padega. abosulte- is position me div ya box apne nearest ancestor(parent) ke according set hoga jab parent bhi positioned ho, agar nhi h to aage check karte hue html k according set ho jaega. transform , filter and perspective property bhi positioned ka kaam karti h aur agar parent me inme se koi bhi property use hui ho to div us parent ke according set ho jaega.

[@isole8780]

dheere dheere log hat te jaa rahe hain just goes to show that jisko seekhna nhi ho uske saamne free ka sona rakhdo phir uthne mai aalsi pana karega Jazakallah Harry bhai, keep going and longer vids please

[@zeeshanchoudhary6486]

@codewitharry u killed it bro my english is not too good soo plz don't mind when i saw ur #sigmawebdevelopment video's i left my paid data analysis course keep it upppp bruhhhhhhhh

[@amitmauli]

You are the best developer in india right now bro.... and i am eagerly waiting when we will be making big projects together...Thank you for this amazing course❤

[@yadu2568]

The difference between sticky and fixed. Sticky position will not change the position of the element to top or bottom or wherever, it will position itself to the given coordinates when the certain threshold of the parent element is passed, whereas Fixed position will change the position of the element according to the given coordinates at once, and will stay fixed at that point even if the page is being scrolled or not.

[@SoumitaBanerjee23]

kash koi college main ayse padate toh aj kahase kaha hote.... huge respect for you sir♥🙏

[@vanshika-w]

12:50 Smjh mai aagyi Apke teaching skills best hai, the way you show us each and every step + you give examples and keep us engaging

[@wiwake]

can i join u ?

[@bilalanwerkingt8955]

The way you described the concept of absolute value of position was quite fascinating, and I don't think that I'll ever forget it in future ... !

[@aliabbasq007]

"This man could have earned millions of rupees by selling this course, yet he chose to keep it free for us. Harry deserves much respect. " #SigmaBatchOP

[@Tejas-su9zj]

By just listening intro music I get goosebumps ❤❤❤

[@travel_guide_in]

summery: CSS position - to manipulate the location of an element 1- position: static; //(by default property , no effect of top, bottom, left, right, z-index) 2- position: relative; //(shift the position according to its actual position) 3- position: absolute: //(shift the position to its nearest parent element) 4- position: fixed; // same as absolute, except the element is positioned relative to browser window no effect of scroll 5- position: sticky; // element is positioned based on scroll position, until the scroll location of the viewport reaches a specified threshold. (when scroll in sticky container it behaves like static) #SigmaBtachOP

[@himanshu30010]

❤

[@rakshitarya5163]

❤

[@Code-Breaker-Official]

One More Position:Sticky

[@yashthakur344]

very good bhai appreaciative work

[@travel_guide_in]

​@@Code-Breaker-Officialmention h bhai, dobra comment read kro

[@hitherthither5712]

Thank you for such a clear and detailed explanation.

[@adityarathod9108]

"Harry Bhai's web development course on KZbin is an absolute gem! 🌟 His teaching style is not only engaging but also incredibly clear and easy to follow. Whether you're a complete beginner or an experienced developer looking to level up your skills, this course has something for everyone. Harry's in-depth explanations and practical examples make complex concepts seem like a breeze. Plus, his passion for web development is truly contagious! 🚀

[@anubhavkashyap1482]

befijul ka kitna gyan dega sabko pata hai ye baat

[@adityarathod9108]

@@anubhavkashyap1482 Thank you

[@niteshnayak940]

Literally maza hi aageya.....❤✨✨✨ ⭐⭐⭐⭐⭐🎊

[@aamish.iqbal01]

Who is exited for JAvascript?🔥🔥

[@CodeWithKrish1]

Me

[@nikhilwithcoade]

​@codewithrohit839 that's good revision is best

[@ZorawarSingh-ip2gr]

Me also❤

[@JAI_CODER]

😮how do you know

[@alpha937]

How many episodes are left in css?did anyone know?

[@WebSigmaBatchOP]

I am big fan aap ne hum logo ke liya Web Development ka Course free main laye hain uske liye dil se thanks... aisa koi KZbin Teacher nahi hai jo Web Developer Course ko free main shikhaye. And dil se thank you thank you thank you sir ❤❤❤ LOVE HO GYA FROM PAKISTAN❤❤❤ Thanks Alot for giving this Course As a Student am very happy to join your course #SIGMABATCHOP

[@albertrio7595]

dear harry this is a very detailed and informative course , and i think i can say on behalf of everyone that we really appreciate your hard work . after saying that if it's possible can you also give us minor examples (from your own or other website ) that what this kind of css is used for as it'll be really helpful no pressure tho

[@vansolaarth9600]

Sigma batch is op ❤️

[@TraptiGupta-s2s]

#SigmaBatchOp 12:46 bhai samjh me aa gayi ye cheez , bhai aap samjhate hi ho itna acha ki na samjhne ki koi gunjaish hi nahi rahti hai ... thank you harry bhai dil se 💜

[@codewithrahull9636]

"This man could have earned millions of rupees by selling this course, yet he chose to keep it free for us. Harry deserves much respect. 🙌" #SigmaBatchOP

[@hetvirajpurohit5233]

Relative: top,left... -> wrt it's static (initial) position Absolute: top,left... -> wrt it's positioned parents .

[@ashutoshjha1910]

Bhaiya aap roj apne hii course ko bookmark se hata dete ho aur uske baad aap video me bookmark krte hoo😅😅😂😂 everyday I noticed you😂😂

[@NileshGuptaA-rr6yb]

pata nhi aisa kyun laga rha h ye course mere bhut se pasie bacha dega aur bana kar bhi dega thank u so much bhaiya #SigmaBatchOp

[@ayushparate4745]

28th Day complete 5star⭐⭐⭐⭐⭐

[@salim1076]

Position property ki isse achhi video maine ajtak nahi dekhi. Thank you harry bhaiyya

[@Android-17]

*Transform, filter & perspective* properties make elements appear as positioned 🤯 #SigmaBatchOP

[@yashrawat7007]

Definitely, bhaiya daily increasing the bar like anything, all thanks to you...

[@kelvinpansuriya4628]

Harry Can You Also Make Course On web3 And Solidity Language.... And Also Prefer Alpha 😅 Name For That Course..... Bro Please Replay Me Because Me And Your Audience Wants Up To Date On Technology......

[@gurindersingh7721]

samaj me a gya..., thank you sir you are great , app jese logo ki vajah se hi hm coding kr pa rhe hai sir thank you so much sir.

[@suggestedforyou]

Hey Harry Bhai please tell us still how much days are required to complete the whole tutorial Bhai please give one deadline 😢 Always we are waiting for your video every day 💓💓💓 Lots of love from South India ❤❤❤❤ #sigmabatchop

[@abutalibsara8781]

sigma bach op

[@Metheeboss]

Harry bhai proved that everything that cost money is not valued, First free course that can easily crossover paid courses

[@LearnBoom]

Rohit singh present

[@nigam_sharma]

Hey Rohit Singh

[@arohangupta7280]

bhai 4 baar dekha hoon same video poora clear hogaya position property maza aagaya thankyou harry bhai :)

[@Nimai_OP]

Apna college

[@HamzaShahzadEB_]

Day 2 13th October: I have completed 15 videos of CSS. I must say you literally raised the bar like anything ❤ It's unbelievable that this course is completely free. I hope it remains free. Sigma batch OP. A highly recommended web development course. 😊❤😊❤😊❤😊❤😊❤😊❤😊❤

[@MoTuGamIng-lr9mp]

first from pakistan

[@kanhiyayadav7224]

Pakistani bacche bhi coding sekhte hai kya

[@MoTuGamIng-lr9mp]

zahir sii baat hy @@kanhiyayadav7224

[@muneerhyder7655]

Same iam from 🇵🇰

[@muneerhyder7655]

Me web development kafi time se follow kr rha hoon Apka koi Question ho mujhe contact kr sagte hain

[@MoTuGamIng-lr9mp]

ary bahi love youso much @@muneerhyder7655

[@cheryrj8305]

Apke teaching skills best hai, the way you show us each and every step + you give examples and keep us engaging

[@ccclasher783]

Your way of teaching is very unique, you explained this topic in a very unique way and my concept is 100% clear related to position property.♥♥

[@Dmdmsmsj]

Pura samaj aa vya 😊

[@GAMER-os2jb]

Guys!! If you are confused to follow this course. I am telling you this type of course is worth it. don't confuse just follow this course. Sigma batch OP Proud to be Sigma Army.

[@rishikumar-uf7tu]

9:56 position: absolute vimp z index 15:51 POSITION:STICKY VIMP 20:07 vimp

[@Vasu-s1s]

sir mja hi aa gya ye sb pdke

[@HASSANRAZA-programmer]

I am fond of this course and also recommended this course to all my classmates.

[@movehard1851]

❤️🙏 Sigma Batch OP. ❤️🙏

[@aryyann05]

Summary for me:- 1) the default position of an element is static: we cant move it, properties like top, left, bottom, right have no effects 2) position: relative; now we can use top, bottom, left, right properties 3) position: absolute; will set position with respect to its parent element otherwise it will be positioned with respect to note: transform, filter or perspective properties can also be considered as positioned 4) position: fixed; will keep the element in place when scrolled, in other words: fixed to the viewport 5) position: sticky; mix of relative and fixed. Will act as relative but as soon as we scroll, it will act as fixed (ex: nav bar) 6) z-index: if 2 or moreelements overlap each other while setting the position, we can define z-index, higher the z-index value, higher it will be placed in the front

[@mohit_yt_user]

Sigma Batch Op ❤❤❤

[@swathi_bee4]

omg...the best explanation so far. Can't thank you enough Harry bhai ...we are so lucky to have have you. #SigmaBatchOP

[@Storylogist]

#sigmawebdevelopment each time I watch your videos , it increases my confidence in coding journey millions of thanks harry bhai .....

[@Xyztwothree]

12:51 bhai samjh aagyi ✌✌👍👍🫡

[@itsmusic7972]

concept is clear as a mirror 😇. Thankyou Sir❤

[@varahalaramana3978]

your outro is amazing i literaly stand and dance on your outro 🥳

[@Xyztwothree]

great explanation

[@mayanksharma_WebDeveloper]

Sigma Batch OP.

[@Xyztwothree]

thanks harry bhai

[@NandiniPathariya]

Best teacher for we design ing

[@skopidgamer]

best web development Course Ever!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@GW_sss]

I was confused about positions now all confusions are cleared. thanks Harry vi

[@karanjitsarkar3690]

absolute position dekhkar moja ageya

[@movehard1851]

Samajh mein aa gayi.

[@Xomputergamer]

samajh me aagyi bat #sigma batch op

[@AakashIjaz-rc1vl]

If #CodeWithHarry makes this course paid at 10k INR, approximately 30k people would likely buy it based on the views on each video. So guys, just imagine-he could earn approximately 300 million INR. Damn, salute to this man for making the course free. Your level is incredible, brother!

[@dakshataramteke1838]

Most important concepts taught in this lesson awesome 💯

[@gamingbeasts111]

Sigma Batch OP😎😎

[@rupaliagale4076]

Sigma batch op 🎉🎉🎉🎉🎉🎉🎉🎉🎉

[@AttariEditors]

class 28: 1. Position is static by default 2. We can not use top bottom etc with postion style static 3. to set z index we nedd to remeove static 4. Absolute position will make changes according to parent 5. position fixed will fix the element on the screen 6. sticky will make anvbar 7. transform, filter and perspective can show an element positoned, child will get according to it even there is no position fixed property

[@Samir-td4fr]

Aap bhot achha explain karte ho, sir . Sab samajh aa gya🔥👍

[@SorupDas-h4p]

Your way of explaining the complex property is nxt level.. Hat's off for this guy for his consistency❤

[@YashasGowda-h9l]

at 9:31 bro you told us to look carefully but the moment i starts to see carefully the ad appeared 😂😂

[@ARJUN-sp2vb]

"wanted to learn full stack development, learn it using full course provided by Edureka"😂

[@brandonnoronha5535]

Sigma Batch OP🔥Superb tutorial today sir👍

[@arthur_bell]

12:51 Bhai samajh mein aagai baat. Sigma Batch OP

[@Mustafa-wi7ry]

12:50 Baat Samajh aa gyi... sir ji 🔥🔥🔥🔥🔥🔥

[@leomessi10194]

Best course ever thank you Harry Sir 🙏

[@AyeshaMuhammadAnwer]

ajj ki class boht hi interested thi🤗

[@ayushmaanraturi]

Tutorial - 28 Done ✅ #SigmaBatchOP #HarryBhai Thank you ❤ Harry bhai for this amazing course

[@feroz15438]

I like in all the world Harry because Harry teaches too deeply

[@abhishekmathur1042]

Sigma batch of yours harry bhai is OP🔥🔥🔥🔥🔥🔥

[@djboltebro]

Bilkul Harry Bhai, 2 bar dekhi tab aii samajh mai

[@HamzaShahid-s8t]

Static Position: Default position. Elements follow the normal document flow. Top, bottom, left, right, and z-index properties have no effect. Relative Position: Element's position is relative to its normal position. Top, bottom, left, right properties can be used to adjust the position. Z-index can be applied to control stacking order. Absolute Position: Element's position is relative to its nearest positioned ancestor (parent with position other than static). If no positioned ancestor is found, it's relative to the initial containing block (usually the viewport). Top, bottom, left, right, and z-index properties can be used. Fixed Position: Element's position is fixed relative to the viewport. It stays in the same place even when the page is scrolled. Top, bottom, left, right properties can be used to position it. Sticky Position: Element's position is based on the user's scroll position. Initially behaves like a relatively positioned element. Becomes fixed once the user scrolls past a certain point.

[@abhishekanand8574]

Harry bhaiya generally people thinks that paid courses offer more but you are going to prove it false. After some time people would realize the value of this content and then your each video would have views in millions. 😊😊😊💝💖💝💖💝💖💝💖

[@abhishekmathur1042]

Sigma web development course of harry bhai is OP🔥🔥🔥🔥⭐⭐⭐⭐⭐

[@propergamer_64]

Great bhaiya

[@jahanzeb7730]

Im from Pakistan and i love harry bro he is such a genius millions of respect 😍

[@BiKe_LoveRs98]

Sigma batch op ❤

[@EchoCraftFX]

Sigma Batch OP

[@Ashay39]

understood position absolute and relative pretty perfectly

[@sohilkhalifa3415]

thank you sooo muuchh harry bhai for make my life better then my past i dont know how i say that you are how much helpfull in my life ☺ love you from kutch

[@Shadoowwss]

Bhai Mai class kr raha hau par itna smj nahi aaya tha... Ab clear ho gaya ❤❤❤❤❤❤❤❤❤❤❤❤❤

[@shaikhshabid3725]

you are a good teacher

[@k4fpix]

sab samajh mein aagayi sirji

[@yasirahsan7025]

Sigma batch OP 🔥

[@salonibhadouriyq]

Tutorial 28 done sigma batch op loving it alot ❤❤

[@adityapawar8290]

what a video sirji bestttt📈📈📈📈📈📈

[@bloodygamer1657]

9:45 best explanation we can't get from the internet 😂😂❤❤