Hello, in this CSS Crash Course video, we're gonna be looking at the different layout types with in CSS, the four main layer types, static, relative, absolute and fix. Fixed, not fixed, fixed, static is what is applied by default unless you change it relative. It's relative to the other objects. Absolutely, you can absolutely just like position it wherever you want. Without it sort of being affected by the content, the soil is over the object and fixed Well, it's fixed. It's always in that particular location on this screen.
So first of all, what we're going to do is create a few days. So we're going to do div and we're going to do an ID, quotation mark. I'm simply going to copy and paste this. So we have four different instances. Part ID of static put a query do relative put an ID of absolute and an ID of fixed inside each of these, we're gonna put that to layout to fix, save that, tell us to see what we've got. So we've got these four divs.
At the moment they, they all look the same. So what we're going to do is go into index CSS. And if I guarantee and I'll put hash left, no, not left Want to put the left property? We just moved it left 50 pixels, save that go back refresh. It hasn't moved. They might be thinking, well, it's not working, even though the actual ID is correct.
And this is what static is static, it doesn't get affected by the left, right, top and bottom positioning properties. So that's probably the best thing. Best way to learn about it on best way to understand why does the next one be effective relative. So relative, we're going to do position. Relative, save that. Refresh still looks the same.
But now, if let's say we were to apply the 50 pixel left property, it actually moves to the left. So you can actually apply the left, right, top and bottom positioning properties. Now we're going to look at absolute new absolute condition hold on absolute save that refresh the finger absolute is it doesn't taking or like other elements don't take into account that particular site. The contents of this because the reason this relative lag text is here, and not on this line because the content on this line, whereas the absolute doesn't take account for that or other objects don't take account of the absolute positions and you can position it wherever you want. So if I were to put left 50 pixels refresh, as you can see, it's moved the absolute layer 50 pixels to the left, but far as the fixed layer two div is concerned.
It doesn't care about the absolute lab. This is something to bear in mind. So for the hash fixed. We're going to put position, pool on fixed. Refreshing, I've been thinking, nothing has changed. But something to bear in mind, we've fixed it, it's always going to be in this position.
So if we were to have a lot more content, and we were to, let's say start scrolling, actually, I'll implement that right now. So if I were to just do div, I'm literally just going to do some random text here. And I'm going to do a breakpoint and I'm going to copy this a whole heap of times. That should be enough to get the page scrolling. Now watch what happens. As you can see, the fixed layout is removed, it's always there.
Whereas everything else does move. I'm actually just gonna get rid of all this extra text, but those are the four layout, position types in CSS, which you will be used and I was like, quite religiously. So that is it for this CSS Crash Course video. If you have any questions, feel free to post it on my education platform sonar learning.co.uk, there will be a link only you should be able to access it very, very easily. In the video, there will be a resource which will take you to the GitHub source code page of this particular series where you can access all the good quality source code and the jaw. Thank you for watching and I hope you have a great day.