Register to get access to free programming courses with interactive exercises

Absolute positioning CSS: Positioning

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.

About Hexlet learning process

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.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs
profession
Development of front-end components for web applications
10 months
from scratch
Start at any time
profession
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.