Hi, I want to make footer, which is on the bottom of site using position:absolute; and bottom:0; and it does not work
Is there any specific reason you are not using
No,but I have been learning css positions and I want to know why it does not work
Ah. Well, here are some excellent resources:
This one is a nice visual aid.
So, it has to do with your workflow:
The visual example does not have the best code, so change the
parent3 to use
bottom instead of
top, and you will see how it is very similar to yours.
Hope this helps
Position absolute uses the nearest “non static” parent element. So it will be absolute from that parent element. Typically you will have a parent div that is position: relative, and then child elements that are position: absolute to keep them positioned within the parent. To position a menu at bottom: 0, use position: fixed. In order to get the centering to work you’ll also have to have a width: 100%. I tweaked your codepen with these fixes here: https://codepen.io/gizmola/pen/BaNXpZe
I guess I left out that the reason it probably didn’t work for you originally is that your footer had no parent that was not static, as the parent of the footer block was the body, which has the default position of “static”.