HTML overflow CSS not working

Question

Webpage I am referencing

The CSS:

a img {
        bottom: -30px;
        right: 0;
        position: absolute;
        overflow: hidden;
        -webkit-transition: all .1s ease-in-out; 
        -moz-transition: all .1s ease-in-out;
        -o-transition: all .1s ease-in-out;
        transition: all .1s ease-in-out;
}
a img:hover {
        transform: translate(0,-30px);
        -webkit-transform: translate(0,-30px);
        -o-transform: translate(0,-30px);
        -moz-transform: translate(0,-30px);
}

Image HTML:

<a href="index.html"><img src="images/tag.png" height="100" width="119"></img></a>

Viewing the webpage on a 1080p screen makes it look like there aren't any problems. But some people do have lower resolution screens.

EX:

https://i.sstatic.net/8xqXW.jpg

As you can see, the "tag" isn't sticking to the bottom of the page. Any help would be great! Thanks!

Answer 1

Do you want it to be always at the bottom of the screen, no matter what? If so,

Change:

position: absolute;

To:

position: fixed;