how sticky-footer how it is
have to add a wrapping element with display: block; but this overlaps the whole page so links can't be clicked!
HTML
<a name="top"></a>
<header id="header">header-content</header>
<div class="contentWrapper">
<main>
<h1>Page-title</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<h2>Sub-title</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea <a href="https://jsfiddle.net">TRY TO CLICK ME</a> takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</main>
<!-- the way it is -->
<div class="stickMeAsBlock">
<a href="#top" class="toTop-how-it-is">to top</a>
</div>
<!-- BUT: You can NOT click in the <a> if it is on the same height as the .stickMeAsBlock because it is overlapping the whole page! -->
</div>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#header {
background: lightblue;
padding: 50px;
text-align: center;
}
main a {
display: inline-block;
padding: 5px 15px;
background: lightgrey;
}
.contentWrapper {
position: relative;
}
/* how it actually is */
.stickMeAsBlock {
position: sticky;
display: block;
bottom: 0;
text-align: right;
}
.toTop-how-it-is {
display: inline-block;
padding: 10px;
margin-right: 2%;
margin-bottom: 2%;
color: #fff;
background: rgba(0, 0, 0, 0.5);
}
/* also with z-indexes not possible */