How to stick the footer to the bottom of the page even with scrolling?

I checked and tried some solutions on this famous problem but I still can’t make it works. My footer is actually at the bottom of the page but when I need to scroll it doesn’t stay on the bottom (it’s at the bottom of the screen but once I start scrolling it stays in the middle of the screen instead of sticking to the bottom)

.footer {
    background-color: rgb(10, 4, 22);
    bottom: 0 !important;
    position: absolute;
    padding-top: 10px !important;
    padding-bottom: 8px !important;
}

What am I doing wrong ?

>Solution :

absolute is tied with the content, if you need the element to be tied to the window instead, you need position: fixed