Position:absolute does not working

Hi, I want to make footer, which is on the bottom of site using position:absolute; and bottom:0; and it does not work

Hello there.

Is there any specific reason you are not using position: relative?

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”.