Video Summary

Alright in this section, we’re going to cover the Z index and the position property with the value absolute. And without being able to explain what the absolute value means for the position property. Without doing the Z index, it really wouldn’t make sense. So that’s why these are kind of combined in the same lesson and you’re about to see how powerful this is going to be. Alright, so what we have here in the HTML is we just have an h1 heading right here. And we just have an image down here. So how this is set up is like a blog that we have our line right here and then we have the image below. What we want to do is, as we want to take this image and we want to tuck it under this heading. And how do we do that? We use the Z and X and the position absolute. So let’s just start off by saying that we have the Z index, and we’re going to make this negative one. And why do we make this negative one? So if you think about this heading, this heading has a value of zero when you’re talking about the Z index that is just a neutral value that everything on the webpage is, and what we want to do is we’re trying to take this picture and we’re trying to tuck it under this heading. So if we claim this as a negative one, this is going behind here, and this is what a lot of WordPress developers do for their different features and their stylings. And you might want to change that or edit that in some way. And that’s where you’ll find a lot of the Z Z index as equaling negative one. 

Alright, so now what we did with that list position as absolute is that we’re giving this position that absolutely needs to be a negative one compared to all other elements. All right. So we haven’t seen any changes yet. And that’s because we haven’t designated the placement of this image yet. So what happens if we say the top equals zero or zero pixels? Zero and zero pixels are the same things essentially. So we just put this heading right behind or put this image behind this heading. And that’s the reason why I made this color blue so it wouldn’t blend in and he went, you would understand that. This is riding on top of this dog’s face. Alright, so what we can do now is if we wanted to, we could say we can go left, and we could say maybe 30 pixels and moves that over. Now one thing we can do too is with this, we can say the margin-left is 30 pixels, and it moves it accordingly. So this is a way that we can kind of position this so that way, wherever we decide this image needs to be it’s going to absolutely stay within this area and behind this heading. 

All right. Before I end this, before we go to the next section, I do want to say that this next tutorial that I’m going to do is a little bit more complicated. I have it already built out. I’m going to go through and explain everything. But I do want to say as is that we can It doesn’t always have to be a negative one. We can change the seat index to 1234 and five but we have to we had to call to multiple different elements. and it’s a lot more code, but you’re gonna run into some instances where the developer might have set it up where he’s got multiple elements right and on top of each other. and we got to figure out how that works and how they work with each other. So that being said, let’s go to the more advanced versions so we can understand what happens when we have multiple elements riding on top of each other.