What is absolute position in CSS - Kevin Chisholm Video
https://blog.kevinchisholm.com/css/ab...
In this video, I’ll explain what absolute position is in CSS.
When considering absolute positioning in CSS, it’s important to think about the structure of the markup. So here in this example, I have three elements, with the classes grandparent, and parent, and child, and they’re nested, so we get the visual result that we see on the right. It’s exactly as we’d expect, with nothing special.
But just keep in mind that parent is an ancestor of child, and grandparent is an ancestor of parent. So look at the CSS. If I apply this CSS we see the green box jumps to the lowermost right hand corner of the page. Why is that? Well with absolute positioning, what happens is the element that has absolute positioning looks for the first ancestor that has any positioning.
So right now, this child has absolute positioning. So when the page loads, it thinks to itself, okay, I’m positioned absolute. I need to find an ancestor that has some positioning, and my next ancestor is parent. So it looks at parent. Parent has no positioning. So it skips that and it moves up a level, and it looks at grandparent, and in this CSS grandparent has no positioning.
So it keeps moving up the DOM, until it finds an element that has positioning. If it doesn’t find one, when it reaches the html element, it positions itself absolute with regards to the html element. So in this case, the element with the class child has positioned itself absolutely, with regards to the html element, and we’ve set the bottom and right properties to be 0, so we’re in the bottom right hand corner of the html element.
Now in this example, we can see that the parent element has a relative positioning. So the green box now appears inside the yellow box. Why is that? Well when the page loads, keep in mind the child has position absolute. So when the page loads, the child says okay, I have position absolute. I need to find the first ancestor that has any positioning.
So it looks at the parent element, and right now the parent element has position relative. So it positions itself absolutely with regards to the parent element, and because we’re using bottom 0 and right 0, it’s in the bottom right hand corner of the yellow box. We could have easily have said top 0, and it would appear in the top of the yellow box.
So one more example, if we now set the grandparent to have relative positioning, what happens is the child that has absolute positioning, starts walking up the DOM tree, and says well I’ll look at my first ancestor and see if it has any positioning. The parent has no positioning, so it skips that and it moves up a level, and it looks at the grandparent element, and right now the grandparent element has position relative.
So the child positions itself absolute, with regards to the grandparent element, because that’s the first ancestor that has any positioning and we’re using bottom 0, and right 0. And once again, we could easily change these to left and top, left and top which gives us the results that we would expect. But bottom and left, and bottom and right just kind of illustrate what’s happening here.
But most important thing to keep in mind about absolute positioning is that the element that is positioned absolute, will walk the DOM, and look for the first ancestor that has any positioning, and when it finds an ancestor that has positioning, it positions itself absolute with regards to that element.
If you found this video helpful, you can subscribe to my channel by clicking the red "Subscribe" button right under the video. You can also take a look at my blog, where there are many articles and tutorials about web development.
Thanks very much for watching.