The point is that a percentage value for top/bottom margin
/padding
properties is relative to the width of the box's containing block. It doesn't respect the height of the parent element.
8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'
<percentage>
The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true formargin-top
andmargin-bottom
as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
As you are using absolute
positioning, try using top: 99%
instead in which a percentage value refers to the height of the box's containing block.