Why is my footer appearing at the top of the page-CodePudding

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

    <!DOCTYPE html>
<html>
    <head>
        <title>title</title>
        <style>
            .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;
            }
        </style>
    </head>
    <body>
        <main>
            <a href="example.com" target="_blank" rel="noopener noreferrer"><img src="img/logoanimated.gif" ></a>
        </main>
        <footer>
            <p>This website is under construction<br>Copyright &copy; 2022 example.</p>
        </footer>
    </body>
</html>

CodePudding user response：

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;
}

<body>
  <main>
    <a href="example.com" target="_blank" rel="noopener noreferrer"><img src="img/logoanimated.gif" ></a>
  </main>
  <footer>
    <p>This website is under construction<br>Copyright &copy; 2022 example.</p>
  </footer>
</body>

CodePudding user response：

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"
                ></a>
  
    <div >
        <p> This website is under construction<br>Copyright &copy; 2022 example.</p>
    </div>
</body>

</html>

CodePudding user response：

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.