2.5 Absolute Position
Next in our lineup of
position types to look closely at is
absolute, one of the most often used types of positioning in CSS. In this video, you’ll learn how to leverage absolute positioning to place your elements with pixel-perfect precision.
1.Introduction1 lesson, 01:13
2.CSS Positioning and Layout6 lessons, 32:14
3.Conclusion1 lesson, 02:30
2.5 Absolute Position
Hi, welcome back to The Complete Guide to CSS positioning in this listen we are going to jump into the specifics of working with position. Absolutely. Now before we get started we just want to reset a couple of things that we did in the last lesson. So we have our child to selected here this want to get rid of these top and left positions so just delete the number and hit Enter. And then, we also want to get rid of the top margin, so click the number and just delete it, hit OK. All right, so now with a second child still selected, we're gonna change the position over here to Absolute. Now the first thing that you'll notice is when you activate position absolute, the element that you're working with gets pulled out of the document floor. So that means that it's no longer going to be affected by the elements around it in the same way. And when you use position absolute you're always going to be sitting one of these properties down here. This is similar to the way that we worked with top left bottom and right with relative positioning. So let's see what happens when we put in top zero, left zero, so we'll put top zero here and left zero here. And you can see that absolutely positioned element has put itself all the way up in the top left corner of the overall window. Now what's happening there is that whenever you use absolute positioning on an element. It's gonna position itself relative to the nearest parent that also has some type of positioning, some type of nonstatic, nondefault positioning. Now right now this child elements are only parent element is our [INAUDIBLE]. And it just has static positioning set, so that's just the default. So as a result, that absolute positioning is gonna be relative to the whole window. Now if we want to absolutely position this element relative to the position of our rapid div, we need to give a rapid div some type of non-static no default positioning. So to make that work or we have to do is change its positioning to any of these three types of positioning to relative absolute or fixed. Now most of the time, when you want to control a child element's absolute positioning, you're just going to use position relative because that way, that parent element is just going to behave normally. Because you remember from our last lesson, unless you actually set a top, left, right or bottom position of relatively positioned element. It's otherwise going to behave exactly as it would if you just had default positioning. So now, activate relative positioning on our wrap up parent. And now you can see that our child too he is position relative to its parent and we can position it anywhere we want inside this parent wrapper. So, let's use some of these shortcut buttons here. We can position our child in the bottom right corner by clicking this button here. And you can see that that set the right value to zero and the bottom value to zero. You can position it over on the left, on the right, on the bottom. On the top. You can position it any way that you want inside the wrapper relative to its outer edges. Now something else that's also worth noticing about absolute positioning is with an absolute position element, you have the ability to use Zed index. Now, if you have a look down here, you can see this is the end index option has appeared or z-index, depending on where you're from. This allows us to kind of layer elements on top of each other. So let's look at an example. Let's also set out third child element to be absolute positioned, And let's put it in the bottom left corner. And just to make things easy to see, let's give our refer element a little bit more height. And right now our child three is showing up on top of our child two, but with z-index, we can swap those around. So let's select our third child, and we'll set its z-index to one. And then we'll select our second child, and we'll set its z-index to two. And now you can see that the second child has come into the foreground. And that's because when you set a z-index property, whichever element has the highest z-index number on it Is going to appear on top. Now Zed-Index actually will work with any type of positioned element so you can also use it with relative positioning and fixed positioning. But generally speaking, you tend to see it more commonly used in combination with absolute positioning. Now the other thing to be aware of is that because absolute positioning does pull an element out of the document flow. There are some things that are not going to be controllable by you anymore. So for example, if I was to increase the height of this child 1 element, let's say to 500, you can see that it is having zero effect on these absolutely positioned elements after it. Now we'll just change the height here on our wrapper element to make this a little bit easier to see. Just set that back to being automatic. So the child_01 element is affecting the height of its parent because its parent still just has relative positioning, but it's not pushing either of these two elements down. It's just going straight behind them. So just keep that in mind that once you do absolute position an element. It's not going to be affected by the elements around it in the same way anymore. In the next and last lesson, we're gonna be looking at position fixed which is very much like position absolute but with one key difference. So we're go through that in the next lesson. I'll see you there.