Why is my footer appearing at the top of the page

Question

Right now my footer is appearing at the top of my page but I'd like it at the bottom, if its rly simple sorry im pretty new to html.

here is my file the css is internal

.middle {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body {
  background-image: url("img/background.webp");
  background-size: cover;
  background-position: center center;
}

footer {
  background-color: black;
  color: white;
}


  
    
  
  
    This website is under construction
Copyright © 2022 example.

user_15225267 · Answer

You have the position in the .middle class, as fixed, which means it will be on top of everything, so if you change the position to relative or some other than fixed, it should work.

user_15372668 · Answer

You can use the position property to position things. In this case I used fixed to fix the footer at the bottom, then the inset property for the shorthand of top, right, bottom, and left properties. More on positions and how to use it here.

.middle {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body {
  background-image: url("img/background.webp");
  background-size: cover;
  background-position: center center;
}

footer {
  background-color: black;
  color: white;
  position: fixed;
  inset: auto 0 0 0;
}


  
    
  
  
    This website is under construction
Copyright © 2022 example.

user_10122048 · Answer

I gave to footer position: fixed bottom:0 left:0 and width:100% and some sample photos for the background.Also i got footer inside div . I came to this result. I hope it works for you





    title
    



    
        
  
    
         This website is under construction
Copyright © 2022 example.

user_15225267 · Answer

Here try this code, I got rid of the all the css in the .middle class, and it centers the image, and puts the footer at the bottom of the image, though you do not want to really ever use fixed position on a footer, because it will always be visible at the bottom, and you don't want that. What you should do, is make is static.

As I was looking at your code, the reason why your footer was above everything, is because you made that image fixed, which means everything will flow to start. So think of the fixed position this way: Pretend you have two boxes, stacked ontop of each other, then you slide the bottom one all the way out. When you slide the bottom one off, the top one falls in place of the other one. The bottom box had the fixed position, so it moves out of place, and it is always in that exact location, even if the window scrolls, it will always in that place, that is why it is called fixed. So just keep that in mind, when you add a fixed position to anything, it "raises" it up and everything "flows" underneath it.

.middle {
  display: block;
  margin: auto;
}

body {
  background-image: url("img/background.webp");
  background-size: cover;
  background-position: center center;
}

footer {
  background-color: black;
  color: white;
}


  
    
  
  
    This website is under construction
Copyright © 2022 example.

Why is my footer appearing at the top of the page

4 Answers