Width & Height vs. Positioning properies (top, right, bottom, left)

When we use positioning, we have top, left, bottom, and right, as well as width and height. Sometimes it feels like they're fighting against each other, but we can use them together for some interesting things!

🔗 Links


#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[techjunkie]

Kevin to the rescue everytime I have an issue/question there you go and upload a video. Luv your vids

[ManiKanta-bfpe]

Hey Kevin..I am having 5 years of experience in CSS but never found stuff like these..you are top class of CSS..thanks for sharing..keep posting.. 🙏

[tsgrunt]

This is always a struggle for me- doing, and understanding some simple aspects of CSS. This video helps a lot.

You have such a talent for explaining things. Thanks for your help!

[Louisianish]

Me: "Oh look, a video made by Kevin Powell on a topic I’m actually familiar with. That’s a first! I might as well still watch it, though."

Me 6 min. and 15 sec. later: "So, turns out, I actually knew nothing about this topic! I’m so glad I watched this video!"

Now imagine this but for every one of Kevin’s videos. 😂

Seriously, though. Thank you, Kevin!

[billychanclub]

Really good explanation! I found earlier that "inset" is the shorthand for top left bottom right, and it just became so much more useful after this video

[Victor_Marius]

A new way to center stuff:
{
position: absolute;
inset: 0;
margin: auto;
}

[Akimb]

Thanks for this video, I always wondered about top, left, bottom, right and how they work against width and height and now I have a better intuition how it works.

By the way, one thing about position fixed - it IS possible to position it other than to viewport. If you apply transform, perspective, or filter to ancestor, the fixed child will position itself relative to that ancestor! So for example, I want to use position fixed on child element in my container, I can do "transform: scale(1)" on the container and voila, it's positioned relative to container and not to viewport.

[aptovegan]

I really admire your master on css and clearity to understand and explain all off it.

[jvenkatonline]

Combination of top, left, ...with the width and height is interesting. Thanks Kevin.

[jasonpedro]

first time I've ever been this early. Thanks for the uploads!

[VasilyPavlik]

Even knowing all of this it is absolutelly awesome to watch your video. Thank you.

[albertoa.r.]

Great video! Its great to know the wrong ways and why they are wrong. I learnt more from this than from many other videos

[sammiller]

We can also just use "inset: 0" rather than having to individually set left, right, bottom, and top to zero. I appreciate your videos. Thanks.

[Ozo]

cool video. I have no explanation for that but I always write the 'top' property before 'left' and 'width' before 'height'

[bloxzyo]

Exactly the vid I was looking for... I even posed this question in the discord server a few days prior and now we are getting a video from you yourself....

[gomitchell]

We could possibly replace top left bottom right with inset as in:

position: absolute;
inset: 0;
width: 50%;
height: 50%;
margin: auto;

[joeldcanfield_spinhead]

I've worked on the web since before CSS existed, and today I learned something new about one of the first things I ever learned. Partly learned, I guess.

[thelifeofisaac]

WOW. did not expect that behavior with right: 0, bottom: 0. Great vid 👍

[tijsvlphotography]

inset: 0; is my go to instead of top: 0; right: 0; bottom: 0; left: 0; or width: 100%; height: 100%;
Or inset: 25; instead of top: 25%; etc or width: 50%; height: 50%;

[dgenerationx]

Kevin : I don't have anything fancy set up...
Subscribers:Here we go again...