Wednesday, November 28, 2018

Part 2: Relative and Absolute Element Positioning

SOURCE: https://www.youtube.com/watch?v=uS9EfxOhjPQ&t=2s

Let's play around a little bit with the absolute positioning. Let's take this third box which is colored cadet blue, even though to me it looks a little bit green, let's take that and let's try to set its absolute positioning to move it right back to where the maroon box, used to be. So let's go to paragraph three and we'll set it's position to absolute and we'll give it a top of 0 and we'll give it a left of 0 as well. And when we save it let's see what happens when we refresh.

And, Voila, when we refreshed you could see it was taken out of the regular normal document flow but it's not quite where we wanted it. We wanted it right here in its original, in the spot where the maroon box used to be, but yet it's flush, right flush with the browsers edges. Now why is that happening? Well let's take a look at our document structure one more time to figure that out. This is the box number 3 right here, represented by paragraph with ID p3. Well, we remember that absolute positioning needs a relative or an absolute parent or an ancestor. Well, it goes up the chain and says is this element something that has it's position set to either absolute or relative. And the answer is no. So it keeps going and it goes up to the body element. And asks if this element have an absolute or a relative position set on it? And the answer is no again. So it jumps all the way to the html element which has its position set to relative by default. And that's how we end up with the box going all the way up top. So how do we fix it? Well, simple, we just need to anchor the ancestor or the container of our paragraph tag with the position relative. And any element contained within that container element will then be positioned relative to its edges. In our case, since we want this box to be relative to the containing div element, we need to set the containing div element's position to relative. Let's go ahead and do that. We'll say position relative, we'll save it, we'll refresh, and when we do it should jump right here where the maroon box used to be. And exactly, so it does.

Last but not least, let's try to move the entire container element down a few pixels and see if all the containing elements will move exactly in the same position down with it. In order to do that let's go ahead and go to our div container and we'll give it a top value of 60 pixels. And once we save let's refresh And the entire container moved down together with all its containing elements and they're all positioned exactly the same as we positioned them before.

So, in summary, static positioning is default for all elements, except html. Html actually has it's positioning set to relative.

Relative positioning offsets the element relative to it's normal document flow position. And the normal document flow is not affected what so ever, by moving or offsetting the relative position element.

Absolute positioning is relative to it's closest ancestor which has positioning set to a non-static value, which is either absolute or relative. The important thing to remember about absolute positioning is that the element is taken out out of it's normal document flow. And the rest of the elements basically behave as if that element doesn't exist.

Also you saw, offsetting the relative container element offsets its contents as well, which gives you great flexibility to move around a whole set of elements and not just one.