Sorry I couldn’t resist.
From this thread:
Joking aside, it should be clear by now that absolute positioning isn’t going to help with your task and layout techniques such as flexbox or grid should be your first stop in laying out your page. I know flex/grid are harder to learn that placing things absolutely but its well worth the effort and will allow to do almost anything you need.
Also be careful with your fixed heights.
What is that supposed to be 10% of?
10% of the document or 10% of the section or 10% of the viewport or 10% of the parent?
Suffice to say percentage heights don’t work like that anyway and in most cases will collapse to zero unless there is an unbroken chain of uninterrupted parents all the way back to the root element all having a fixed height defined (other than auto).
These days you can use vh units (viewport height) and so you could say height:10vh which will give 10% height of the viewport. However, should your content in that element exceed the height specified it will overflow and indeed if someone zooms text only it will overflow. With that in mind it would be better to say min-height:10vh instead of height and in that way the element can grow if needed. Better still just let the content control the height unless its just a series of fixed height images or similar.
(The 10% will work for absolute elements but only if they have a context and you will get 10% the height of the nearest positioned ancestor assuming that ancestor has a height defined otherwise you get zero. If there is no such ancestor then you will get 10% height of the viewport as in your example.)
These are all common mistakes that many people make.
@DaveMaxwell has given a good example of how to approach this.