How to keep a fixed footer from overlapping other elements?

How to keep a fixed footer from overlapping other elements?
0.0 0

#1

https://jsfiddle.net/hmsrj1jh/

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