How to keep a fixed footer from overlapping other elements?

1

Do I have to manipulate the position of the other elements?


.footer {
  position: fixed;
  padding: 20px;
  bottom: 0;
  width:100%;
}
2

if you want that he would be above other elements (overlapped them) use CSS z-index rule (here is the link). Then footer will be always above other elements.

.footer {
  position: fixed;
  padding: 20px;
  bottom: 0;
  width:100%;
  height: 50px;
  z-index: 1000;
}

Did you mean this?

3

Just tried it moments before your reply and it seems to make it go away altogether

4

You want to footer not overlap other elements or overlap them like this?
image