Solution 1 :

you will need to add z-index which handles the layers in CSS..

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

footer {
    background: linear-gradient(to right, #ffffff 0%, #000066 100%);
    border-style: outset;
    border-width: 10px;
    border-color: #060675;
    text-align: center;
    font-size: 15px;
    position: fixed;
    z-index: 10; /* higher the number the more upper layer it will go*/
    bottom: 0;
    height: 80px;
    width: 100%;
  }

Problem :

I’ve got a footer that stays on the bottom all right. But I noticed that when I scroll it goes over some elements but it goes under other element which looks super odd. I don’t understand why that is.

footer {
    background: linear-gradient(to right, #ffffff 0%, #000066 100%);
    border-style: outset;
    border-width: 10px;
    border-color: #060675;
    text-align: center;
    font-size: 15px;
    position: fixed;
    bottom: 0;
    height: 80px;
    width: 100%;
  }

I’d like to have a footer that goes over all content. Is this about positioning absolute and relative. It could be because some elements are positioned relatively and some I didn’t specify thus it’s positioned relatively by default and yet the footer goes over and not under.

How can I go about this ?

By

Leave a Reply

Your email address will not be published. Required fields are marked *