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:
- Suppose we want to position element relative to the nearest positioned ancestor and not the page itself
- Or when you change the page width, an element with absolute positioning will also change since its coordinates are counted from the edge
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.
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.
