Browser Positioning

[00:00:00]
>> Evgenii Ray: Okay, so now we have the browser positioning system. So in the web, we have a term normal flow, so it's basically when the elements are rendered in a natural order. So for instance, in the Altair languages, they ran their enemies from top to bottom, from left to right, from RTL languages are rendered from right to left.

[00:00:23]
And if we have a term normal flow, does it mean that we can't remove elements from the normal flow? And apparently, we can. So there is a special property called position that allows us to override how the browser positions the element. And the most useful one is the static relative of absolute, so we'll start with the static.

[00:00:45]
So the static is basically applied by default. When you build your layout, the browser applies the static position to every element. And as you can see, if we render this HTML, we'll see that everything is rendered from top to bottom, from left to right, the position relative has a few interesting characteristics.

[00:01:05]
So, the element in the center is positioned relatively. So the key differences or the browser renders the element that is positioned relative, the same as the normal flow. But the final position is determined by the top, right, bottom, and left properties in CSS. So we can move our element, and you can see when we move that, the change to the position doesn't impact other elements.

[00:01:38]
So somehow, we can adjust the position of the element without impacting other elements. And this is because the element is removed from normal flow. And when the element is removed from normal flow, it doesn't impact any other elements. And there is also one important term that we're going to look after a few slides as a Stacking Context.

[00:02:02]
So when we apply position relative, we create a new stacking context, some kind of new realm, where we put over all our elements. And these elements now are completely isolated from everything that was within the normal flow. So before we discuss the position absolute, I think it's important to understand what is the containing block.

[00:02:25]
So the containing block is kind of a reference point for the element, how it calculates its position on the screen. So for instance, for HTML, the containing block will be the browser viewport. When you open the page, you browse a window, so this is the default viewport for HTML.

[00:02:43]
But there are rules when we can create the containing blocks. So for instance, if you apply the relative position to the div tag, you will see that because the relative position is applied, it becomes the continuing block. So now the div is the continuing block of the paragraph.

[00:03:02]
So the same there is one more rule which is for if we set the position relative to the to the element, the closest containing block of this element will be the closest ancestor. So this means the body as a closest ancestor becomes the containing block of the div tag.

[00:03:26]
>> Evgenii Ray: And let's discuss the position absolute now. So the position absolute behaves completely different from relative positioning. So the element is removed from the normal thought. So if we apply the position absolute to the paragraph, so now we create a new Stacking Context. So as you can see, every modification that we potentially could do to this element will be isolated from the default Stacking Context.

[00:03:53]
And also, the final position is always determined by the top, right, bottom, and the left properties. And absolute position item use its containing block to calculate its position. So by default, the settlement will be rendered at the left topmost corner of the element. And then we can adjust this position using the properties here.

[00:04:14]
Let's try to render a few absolute items. So for instance, we have the following HTML, and right now we render it the body section and a div. Now we have two absolute position boxes, so let's render it one by one. So when we render the Box 1, so we created a new Stacking Context because position absolute is a sign.

[00:04:36]
So when we render the second box, then we created a new Stacking Context, so now the Box 1 and Box 2 are rendered in the separate realms. And also, you can see that because it's a Stacking Context, the Box 2 is rendered on the top of the Box 1, because the layering works as a stack by default, unless you apply the Z-index property.

[00:05:02]
So what is the key summary? Why it's important to understand the relative and absolute positioning? The benefit of the relative and absolute positioning lies in their ability to remove items from the normal flow. So if we use this position in y's, we can achieve the isolation. So every modification to the element will be completely isolated, so it means that we can optimize the dome performance.

[00:05:25]
And it's also, we can minimize potential reflow. And we're gonna discuss reflow just in a few slides. And to prove the point that there is a kind of z-axis when we render the elements. So, when we just built a template with HTML, we usually utilize x and y-axis.

[00:05:48]
But there is a another axis, which is z-axis, which is used when we apply some 3D transformation, absolute position. So basically when we work with this Stacking Context. And we will see later in a few slides how Stacking Context is connected to GPU and how the browser utilizes the layers.

[00:06:10]
So right now, all we need to know is that Stacking Context provides us with a layering system and isolated realms of the elements. Okay, so to prove the point, we can render three boxes and change the perspective how we view at the viewpoint and then apply the translate z, and move the elements kind of on top of each other.

[00:06:37]
So you see that they kinda stack on each other.