Archiv-Modus von Basti1012 Lösungspage

Hallo, ich hoffe mein kleines Problem wurde bisher noch nicht thematisiert. Nur dazu zu recherchieren ist ein wenig komisch, deswegen frage ich einfach mal hier nach^^ Es geht um einen Footer, der ähnlich einem Sticky Footer über dem Inhalt der Seite liegen soll, da er durchsichtig ist. Allerdings soll er nicht am unteren Bildschirmrand kleben, sondern ganz unten an der Seite. (Wenn ich danach suche komme ich immer zum Sticky Footer.) Normalerweise ist das kein Problem, nur da ich noch nicht so erfahren bin, weiß ich einfach nicht weiter wie ich den Footer über den Inhalt bekommen soll, ohne dass er irgendwo in der Mitte der Seite schwebt. Ich hoffe ihr könnt mir helfen, und dass meine Frage nicht zu simpel ist ;D

Code

                                    
                                 
<style>

body{

  height:1200px;

}


div.container {
    width: 100%;
    border: 1px solid gray;
}

header {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}
   
nav ul a {
    text-decoration: none;
}

p1{
  font-size:25px;
  color:blue;
}

p2{
  font-size:23px;
  color :green;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
    height:1000px;
}






footer{
  position:relative;
  left:0px;
  bottom:0px;
 
      padding: 1em;
    color: white;
    background-color: black;

    text-align: center;
}


</style>
<body>

<div class="container">

<header>
   <h1>Hilfe Überschrieft</h1>
</header>
  
<nav>
<h3>
Menü
</h3>
  <ul>
    <li><a href="https://www.html-seminar.de/">Home</a></li>
    <li><a href="https://www.html-seminar.de/forum/thread/6836-footer-unten-und-über-inhalt/#post45728">Mein Thema</a></li>
    <li><a href="#">leer5</a></li>
  </ul>
</nav>

<article>
  <h1>Lorem ipsum</h1>
 hier kann eine menge text rein.<br>
 <p1>Auch gross</p1><br>
 <p2>Mit eigenen Tag Namen "p2"</p2>
</article>

<footer>Footer Copyright &copy; Basti1012</footer>

</div>

</body>

basti1012.bplaced.net

Footer unten und über Inhalt

Code