CSS Course | CSS Position Property | Complete Web Development Course Beginner to Advance Tutorial 21

Hey guys, In this video, We will learn about the position property in CSS. We will learn about static, relative, absolute, fixed and sticky properties.

Websites use:

🥳 Join our Telegram Community:

🚀 Follow me on:

Hashtags:
#codingshuttle #webdevelopment

[muazimmaqbool]

CSS of Home Work :
<style>
body{
margin: 0;
}
nav{
background-color: blueviolet;
height: 80px;
position: sticky;
top: 0px;
}
main{
border: 1px solid black;
width: 700px;
padding: 10px;
margin: 0 auto;
}
.right-side aside{ /* or just use .right-side{...}*/
width: 250px;
height: 450px;
background-color: violet;
position: absolute;
right: 20px;
top: 120px;
z-index: -1;
}
.circle-fixed{
background-color: red;
width: 100px;
height: 100px;
border-radius: 50%;
position:fixed;
right: 90px;
bottom: 50px;
}
footer{
background-color: blueviolet;
height: 120px;
/* margin-top: 5px; */
}
</style> 🙂

[Solve-problem-with-Singh]

main position css diya bahut video dekhia but u r the only one who taught a best way specify, salute to u

[mariyamahad]

For the very first time I finally got this topic. Amazing explanation 👏

[praphullkumar]

One of most clear explanation on YouTube. I say many videos but it is very easy explanation over other. Thank a lot Anuj Bhaiya🙏

[tcgaming]

sir agar students ko annoying lage ye screen cast to settings>cast mai jaake font size thoda chota kar dijiye or vertical offset 3-4 kar dijiye isse ye screen ke ek dum neeche chala jayega or chote font size se jada dikkat bhi nahi hogi Or command and keys dono enable kar dijiye please

[khilafat]

Egarly waiting for Data science/ Data Analyst course.. believe me guys if this person (Anuj bhaiya) make a course on This Domin thn the views and subscriber he will gain insane. Go and watch his python videos of class-12. Buttery smooth. He is one of the finest educator I have ever seen. Hope he will lunch a course on this particular domain @anujbhaiya

[anonymus__]

I watched many videos related to this topic but this was the best and most easily understood.The way you made those boxes and parent container was really very impressive and eye catching.

[rtkmrg]

Kya baval chize padhate he ajun bhaiya👌👌👍👍😍😍

[venkat.sairam]

best web development course. please complete this course.

[KashifKhan-ocst]

the best video according this kind of topic..it was quite hard and confusing before .but you made it quite clear and easy

[ratishjain]

Tried to learn this concept from so many resources but this one was best

[codingopedia]

Thankyou bhaiya maine phele bhi kahi se css me position seekha tha but mujhe samaj sahi se nahi aaya tha ki kab usse use karna chaiya aur kaha chaiye but aab samaj me aa gaya hai aapki videos dekh ke. Thankyou and keep going Videos jaldhi upload karo.

[narayanraghuwanshi]

Tutorial 21/21 completed ✅
Thanks bhaiya for increasing frequency.

[botkiller]

relative is relative to the previous position /original position

[killerak]

Thanks Bhaiya for regular and this type of content 🥰

[kaushalkishore]

Kaafi achi content de rahe ho bhaiya, I'm very keen to learn from you... ☮️🌼

Position's Best Information Sir.

[danishanware]

one of the best video on you tube about position property and in the way, easy to understand. Good Work Bro. surely i will go through all your videos.

[pillosEnvironment]

Sir aap homework dena shuru kijiye. Like koi bhi layout design krne ka . It will help us to understand more clearly with practical knowledge ❤️.

[unbeatable]

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

nav {
background-color: blueviolet;
height: 30px;
width: 100%;
position: fixed;
top: 0;
z-index: 2;
/* border: 2px solid black; */

}

main {

border: 2px solid black;
width: 600px;
height: 600px;
margin: 50px auto;

}

p {
position: sticky;
top: 50px;

}

.right-container {
/* border: 2px solid black; */
/* width: 300px;
height: 600px; */
/* margin: 20px 10px; */
}




.right-container aside {

position: absolute;
top: 50px;
right: 10px;
background-color: aquamarine;
width: 300px;
height: 600px;
}

.contact {
background-color: red;
height: 100px;
width: 100px;
position: fixed;
bottom: 50px;
right: 10px;
border-radius: 50%;
}

footer {
background-color: blueviolet;
height: 30px;
width: 100%;
position: fixed;
bottom: 0;
}

2 ghanta laga perfect banane mein fir bhi scroll nhi ho rha 🥲