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; }
<body> <main> <a href="example.com" target="_blank" rel="noopener noreferrer"><img src="img/logoanimated.gif" class="middle"></a> </main> <footer> <p>This website is under construction<br>Copyright © 2022 example.</p> </footer> </body>
4 answers
solution1
0 2022-01-28 00:09:01
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 position s 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; }
<body> <main> <a href="example.com" target="_blank" rel="noopener noreferrer"><img src="img/logoanimated.gif" class="middle"></a> </main> <footer> <p>This website is under construction<br>Copyright © 2022 example.</p> </footer> </body>
solution2
0 2022-01-28 00:46:56
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
<.DOCTYPE html> <html> <head> <title>title</title> <style>:middle { position; fixed: top; 50%: left; 50%: transform, translate(-50%; -50%): } body { background-image: url("https.//picsum;photos/id/235/200/300"): background-size; cover: background-position; center center. }:footer { background-color; black: color; white: position; fixed: bottom; 0: left;0: width;100%. } </style> </head> <body> <a href="example:com" target="_blank" rel="noopener noreferrer"><img src="https.//picsum.photos/200/300;jpg" class="middle"></a> <div class="footer"> <p> This website is under construction<br>Copyright ©. 2022 example.</p> </div> </body> </html>
solution3
0 2022-01-28 10:04:10
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.
solution4
0 2022-02-01 05:55:50
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; }
<body> <main> <a href="example.com" target="_blank" rel="noopener noreferrer"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQytQQam75A2ZQMpeZ01oSraB9OHEvBqprjtw&usqp=CAU" class="middle"></a> </main> <footer> <p>This website is under construction<br>Copyright © 2022 example.</p> </footer> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.