The next important type of positioning is absolute positioning. It may look more confusing than relative, but with a little practice, you'll easily learn all the nuances of working with it.
To set the element to absolute positioning, we still use the position property, but now with the absolute value.
<style>
.absolute {
position: absolute;
}
</style>
<div class="absolute">
<p>Block with absolute positioning. Any elements can be inside it, and they will also move with the main block.</p>
</div>
The main distinguishing feature of absolute positioning is that the block seems to be pulled out of the document flow. This element no longer exists for normal flow, so the space it previously occupied is freed up and can be occupied by other elements, if, of course, their width and height allow them to do so.
If the element does not exist in the document flow, what will the element be positioned relative to? The answer is simple: relative to the top-left corner of the page. Now this point becomes the origin of the coordinates, and our elements have the coordinates (0, 0), and the location is controlled by the same properties: top, right, bottom, left.
Absolute positioning is used quite often. It helps, for example, to focus the user's attention on a particular element. Think of the various pop-ups on websites. In order for the user to see the message more clearly, there's a dark area underneath it that hides the main content of the site.
An important feature of absolute positioning is that block elements with absolute positioning behave like lines. They stop taking up all the available width (because they're no longer in the flow, and it's unclear where they get that width from) but take up only the width of their content, margins and paddings. An interesting way to stretch such a block to the full width of the screen is to specify the left and right properties simultaneously.
For example, if you set the left and right values to zero for a block with absolute positioning, the block will stretch to the entire working width of the browser because it must be at both the far-right and far-left.
Moreover, if you don't specify any of the available top, right, bottom, and left values, the element will not move from where it was originally. In this case, it is no longer involved in the normal flow, so other elements will take its place and superimpose on it.
Are there any more questions? Ask them in the Discussion section.
The Hexlet support team or other students will answer you.
For full access to the course you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
