Learn CSS position in 5 minutes 🎯

preview_player
Показать описание
CSS position tutorial example explained

#CSS #position #tutorial

#box1{
border: 5px solid;
height: 300px;
width: 300px;
background-color:skyblue;

position: sticky;
top: 0px;
}
#box2{
border: 5px solid;
height: 100px;
width: 100px;
background-color:tomato;

position: absolute;

top: 100px;
left: 100px;
}
Рекомендации по теме
Комментарии
Автор

#box1{
border: 5px solid;
height: 300px;
width: 300px;
background-color:skyblue;

position: sticky;
top: 0px;
}
#box2{
border: 5px solid;
height: 100px;
width: 100px;
background-color:tomato;

position: absolute;

top: 100px;
left: 100px;
}

<!DOCTYPE html>

<html>
<head>
<title>My first website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>

<div id="box1">
<div id="box2"></div>
</div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, similique corrupti iusto ratione debitis explicabo, minus sint doloremque reprehenderit dicta, expedita nam architecto? Repellendus asperiores vero, eaque dolorum iusto ab.</p>

</body>
</html>

BroCodez
Автор

I can't understand how you can possibly push out this many high quality videos the only other person I've seen with quality almost this good is Thenewboston.

cayden
Автор

You're a good teacher, your voice is very clear and I like your brisk, clear style. Your lessons are better than many paid-for lessons. Well done!

milesturner
Автор

static - basic
relative - you can move from origin position
absolute - as if document is ignoring it position like ghost. any absolute elements search for any parent that are positioned non-static. If it doesn't have non-static parent, then it will use its view-port
fixed - fixed is stayed in your view-port. So even when you scroll, it's position is stayed
sticky - element will stick to your edge of view-port when you scroll pass.

shewn
Автор

i watched tutorials and tutorials about positioning and no one explained better than you. Thanks!

mirketz
Автор

The most clear, precise, concise tutorials I ever seen online. Kudos to you Bro Code. I am your forever fan!

JohnsonOpigo
Автор

Clear, concise and straight to the point. I salute you.

troyhackney
Автор

I've watched vidoes from other channles struggle to give explaination with jargons etcs and still left me with many questions. This channel is straight forward, comprehensive and get the job done. This is my go to channel, thank you.

silvercat
Автор

You make things so If you had a course I’d pay for it.

taz
Автор

This was great. I thought i understood these points pretty well, but I never realized that absolute is based on the parent's position. Thanks.

coffeebot
Автор

nice Bro
I do see all your's new vídeos about css
And i have already seen all vídeos about Java, JavaFx, swing..
html and js.
pls never stop, u do an great job!
~from Brasil 🇧🇷

gamergt
Автор

I rarely comment, but I have to say that you have an excellent methodology. I can grasp in just a few minutes what I didn't understand for hours. Moreover, your voice is very helpful; you give the impression that you enjoy what you do. Cheers from France
Thank you very much.

bernard
Автор

شكرا كثيرا .
Every lesson I learn more, this chanel needs to recommonded to people how wants to leaen quick and easy way.

اماديرأمان
Автор

SIMPLE EXPLANATION BUT SOLID THANKS BROOO FOR THIS CONTENT

markvincentrocas
Автор

Thanks for this video. I love how its so short yet explains the concepts so well. Thumbs up.

thomasmunguya
Автор

Best expiation for position on Youtube, covered all the possible combination

zackwong
Автор

this bro helped alot, wil never forget you

artistory
Автор

This is a GOAT video about css positioning. Thank you!

khalidelgazzar
Автор

Wao I understood the concept only from this

haseebkhawaja
Автор

Thanks for this video. I'm learning from Codecademy and struggling to grasp this positioning concept. Your video made it very clear and simple.

k.iskandar