In the lesson about absolute positioning, we said that the element is positioned relative to the page corner. This behavior is not always convenient for several reasons:
Let's imagine a situation where we want to create a block that can be closed by clicking on the cross in the upper-right corner. At this stage, we're only concerned with being able to create this cross without complicating the layout. This is where absolute positioning comes in handy. Using it and the top
and right
rules, we can say that the cross will always be in the top-right corner.
The only question left is how we can position it relative to the block. An element with absolute positioning will be positioned relative to the page edge only when none of the parent elements have any other positioning. I.e., if the parent block has relative or absolute positioning, a child element with absolute positioning will be positioned relative to it, not to the page edge.
In this case, the task of positioning the element to close the block becomes simple – we only need to specify the relative positioning of the whole block, and the close button will be automatically positioned relative to this block.
The Hexlet support team or other students will answer you.
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.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
Sign up or sign in
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.