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.
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
- Article “How to Learn and Cope with Negative Thoughts“
- Article “Learning Traps“
- Article “Complex and simple programming tasks“
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.
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
Our graduates work in companies:
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
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.