Hey, my name is Dan. In this video we're gonna look at absolute positioning. Now, absolute positioning is a little trick we can use to  force, uh, force a div tag  or some sort of object, either an image  to go exactly where we want it to do. At the moment, everything is kind of relative to each other. Now, um, what it means is it's gonna allow me  to do some tricks with this 'cause I wanna rebuild this. I'm in Photoshop at the moment.

I wanna  rebuild this in Dreamweaver. Now what I could do is I could make my,  I've already got my container made in Dreamweaver. I could put an image as a background image  and then push the text over the top,  which would be, wouldn't be hard. The only problem with that is that these images  would then become part of the CSS  and not be read out to the user. And the problem with that is  that they're actually quite useful,  important part of the website. They're actually a thing on there  and I want Google to be able to see it  and I want screen readers to be able to see it.

So what I'm gonna have to do is stick it in  as a regular image  and then I'm gonna put text over the top of it. But without using absolute positioning,  text will not go over the top of an image  that's in the HTML. It'll go over the background of the CSS,  but not in the H TM l. Lemme show you the finished thing  to show you why it wouldn't work  without absolute positioning. So this is one that I've finished earlier. And um, here is, um, my text box.

This one thing here, I've got a text portfolio. If I turn up, disable the absolute positioning I've done. Can you see without it, the text will  not go over top of the image. There's the image. So it can be read by the screen reader. It's in this, uh, it's in the HTML, which is great.

And this text here will not go over the top of it  unless I make this text box absolutely positioned. So let's go and do that. First of all, I wanna get inside this column that I've made  and I want to insert my image. Okay? Nothing special about that. So I'm gonna go, I've selected my  column, I'm gonna get it insert.

I'm gonna go to image, I'm gonna nest it inside. I'm gonna go off and find on my desktop under  dream exercise files, images. There's one in here called Portfolio One. So I'm gonna jump him in there. Great. I'm gonna set him to remember, I'm gonna click on this  and set it to make responsive so it fits inside that box  and gets bigger and smaller depending on the size.

Next I wanna do is I'm gonna put in the box  that's gonna contain my text. So what I want to do is I'm gonna go to insert div,  whereas I gonna say, I'm gonna say  it's just going to be after. Okay? And there's my div tag here. Uh, it's got no name at the moment. I'm gonna create a class for it over here.

My main CSSI can't click on it. If you can't click on it, it's  because I've switched to current, um,  while I was playing around doing something else. So make sure if you are finding it  hard to use switch to all. I'm gonna be extra main CSS, I'm gonna create a selector. And this one here is gonna be called Full Stop, uh,  text portfolio. Great.

I'm gonna turn show set off so I can see everything. And what I want to do is I wanna do a couple of things. I'm gonna make the background of this div, uh, black,  so we can see where it's background color black. Awesome. Now, nothing's happening over here. Why?

'cause I haven't applied my class yet. So I've got my div selected. I'm gonna add a class. And this is gonna be called text portfolio. Great. So it's doing the bit where it, it's relative  to the image above it.

Okay? So he sits underneath. What I'd like to do is change it to the absolute. And what that'll do is that it will then ignore the image  and will go to the outside container,  which is this thing called Coal three. Uh, coal large three, right? And here he is, he's sitting underneath the image.

What I wanna do is pull 'em up  and move 'em around over top  of this image using absolute positioning. So I've got it selected. There's text portfolio here. I've got it over here. I'm going to scroll up to the top  and scroll down until I find under position. It's a bit obscure where it says static,  which it is by default.

We're gonna go to absolute. Okay. And it does nothing really other than the container div,  which was this Coal large three forgets. It exists. Okay? It doesn't see it, so it's collapsed down.

It's still there, it's fine,  but the housing container doesn't see it. What I can do now is when I go to position,  I can say on the left here, I want to change it. So it is maybe 35 pixels from the left. And I'd like it to be, I could use top  and put a really big margin in so I could put top pixels  and I could make it 200 and try  and push it down to the bottom here. I'm gonna click it, maybe make it 180, okay. And get it in the bottom, or I can bin  that And use the bottom.

Okay. It's just easy to start from that direction. So I'm going to click on bottom, go to pixels,  and I'm gonna set this one to maybe 15. So it sits up there from the bottom there. All right. 15 pixels from the bottom, 35 from the side.

And that's one of the uses for absolute positioning. There's lots of other ways you can use absolute positioning. It'll pop up on web design over and over. This is not a complete kind of overview of what it does,  but it's just a kind of like a sample of some, uh, some  of the things you can do with some absolute positioning. All right, so before we go, that's finish off styling it. 'cause I want it to look a lot like this in Photoshop.

It's a bit of a transparent background  and some padding around there. So what I'm gonna do is text portfolio. Great. I'm gonna do some padding. So padding, uh, what, two pixels to the top,  two pixels to the bottom. Maybe file on that side.

Five on that side. Great. You can see the padding appearing  around this div tag here. Maybe make it even a bit more. So I'm gonna increase it up to maybe 10 10. That feels about right.

I'm gonna change the text inside of here. So I'm gonna click until it goes orange. And this one was, uh, our company called Acme, Inc. Great. And what I also want  to do is change the background color to  be a little bit transparent. So I'm gonna play with the alpha,  becomes a little, see-through.

Great. And I also wanna change the font. Now what I could do is I could go through  and make a separate class for the font Okay. And apply it to it. 'cause at the moment  there's nothing applied to it. But what I can do is I can actually,  we've got this parent div tag here called Text portfolio.

We can control everything inside of this. Even though we've done background color  and stuff, we can control the font as well. So inside of here, you, my friend, now are,  you're the right font,  but you're gonna be the right size now. So I'm gonna go to the right size  and let's just check what I did in Photoshop. So it is, uh, it gets up to about 14. Okay?

So there's something in here I forgot. Client. Client. And it's gonna be  make me think great. And font size. Actually, I'm gonna maybe make it even a little bit bigger.

So I'm gonna make it up to 16,  Maybe 18, 17, 16. All right. And maybe the font weight. I'm gonna push the font weight down to the lighter one,  so down to 300 instead of 400. Lovely. All right,  so we learned a little bit about absolute positioning  and we've styled off text.

And let's look at the next video and we'll go through  and reproduce this for all four boxes.