Video Summary
Alright, in this section, it’s a little bit more of the advanced version of the Z index and the position absolute.
What we’re looking at here is is we have basically an h1 tag. As this is a heading. We have the paragraph tag that just has a paragraph and we have a button tag. And if we are looking at this and let’s just take all of this CSS off for a second.
Right? So what we’re looking at here is, as the normal HTML code, we’ll say that the headings first and that’s the paragraph and then that’s the button. But what we have visually once we transform this is we have the h1 Heading that’s in the back. We have the paragraph that’s in front of that, and we have the button that’s up at the front. Alright, so let’s just go through this code and let’s just see what we’re looking at. So what I wanted to do with the h1 tag so we could see it in a real visual sense as I made the background color blue, I made the color white. I made the padding 50. So we had a pretty large area right here. And then what I did too is I said I wanted the margin at the top to be 50 pixels. So I moved, this section 50 pixels down, and I have the Z index as one, which is when we’re working with multiple sections that we’re trying to stack on each other. We could essentially make this into a numbers game. So what I have here is I have the h one has a Z index which places that first then we have the paragraph Z index two which places that second which I have that as a color black, the background color black, the color white, and I made this 150 pixels from the top. So this is three from where this starts. And what I have here is I have this button tag where I claim that this is the third index or for the Z index and the margin is 150. So it’s the same as the margin.
The top is the same for the paragraph as the button and if you look down here, that’s why they start at the same point. But when we essentially what we do is we set up as the Z index one here puts us in the puts us first then the Z index two for the paragraph puts that second and the Z index three for this button puts that third and we use the margins and we use that we basically just use the margins from the top to illustrate this. Now when we’re getting into WordPress and we are leveraging other people’s code, you’re going to find that they have used these type of Z indexes from time to time. That’s because they’re trying to layer and stack certain elements to create a feature. If you need to go and play with this when we’re in when we’re styling and doing stuff on this h2 or these WordPress themes. This is what this is what the Z index does and this is how we work with it. Now you will you won’t have to you won’t have to really play with the absolute features on this unless you’re trying to essentially stack an element on top of each other and if an element is just there and you want it to overlay and then position it where you want to you got to make sure that you use in the position as absolute and then play around with the Z index according to what the developers or what the code is telling us. So if we essentially wanted to, we could make this a negative one. This paragraph and now we just basically took this and we placed this behind everything. And if we put this as let’s see what happens we put this as zero.
Nothing really happens when it’s zero because what we’re saying is that zero is the overall z the Z index is the overall position. So essentially what we did is that zero is where the website starts and now since we add the h one as one we are putting that above this now and then the button here is now at the top. So what happens if we do if we make this a negative one?
Let’s put this as a negative one. So now we are back to pretty much the same order as we were right we have a negative one here, which is essentially saying that’s behind everything. Zero is the parallel to what the page is telling us. And three, if we do three or one, the button remains in front. So if you think about the Z index, the negative one puts it behind everything. Zero is absolute.
The absolute level of the whole webpage and 12345 and so on will just keep stacking those layers on top of each one of those elements. So I hope this was helpful in getting a little bit more in-depth. I didn’t want to go through and type all this out. I want to keep this video as short as possible with the concept and the idea of how to use these here and I hope this helps and especially when we start getting into WordPress. So on to the next section.