Removing whitespace at bottom of a page when using a sticky image - html

Question

I have the following layout where I am using position: sticky to place an image near the bottom right corner of the page (below a flex layout):
.footer-logo {position: sticky; bottom: 50px; z-index: 100; margin: 50px; padding: 25px; width: 100px; height: 100px; background-color: green; float: right;}
.flex-container {height: 400px; display: flex; flex-wrap: wrap; background-color: #f2f2f2; padding-top:20px; justify-content: center;}
<div class="flex-container"></div>
<img class="footer-logo" src="https://placehold.it/100x100"></img>
The img sticks in the correct position, but below the flex-container there is whitespace which spans the full width of the page and is the same height as the img (including padding & margin).
How do I not display this whitespace whilst still retaining the correct positioning of the img?

Answer 1

You can remove it using negative margin equal to the height. That space is the space of the image since position:sticky will keep the element part of the flow:
.footer-logo {
position: sticky;
bottom: 50px;
z-index: 100;
padding: 25px;
width: 100px;
height: 100px;
background-color: green;
float: right;
}
.flex-container {
height: 400px;
display: flex;
flex-wrap: wrap;
background-color: #f2f2f2;
padding-top: 20px;
justify-content: center;
margin-bottom: -150px;
}
<div class="flex-container"></div>
<img class="footer-logo" src="https://placehold.it/100x100">

Answer 2

You can use this code
body {
margin: 0;
}
.footer-logo {
position: sticky;
z-index: 100;
padding: 25px;
width: 100px;
height: 100px;
background-color: green;
float: right;
}
.flex-container {
height: 400px;
display: flex;
flex-wrap: wrap;
background-color: #f2f2f2;
padding-top: 20px;
margin-bottom: -150px;
justify-content: center;
}
<div class="flex-container"></div>
<img class="footer-logo" src="https://placehold.it/100x100" alt="100x100" />

Answer 3

I realised that I just needed to use position: fixed with bottom and right also set:
body {
margin: 0;
}
.footer-logo {
position: fixed;
bottom: 50px;
right: 50px;
z-index: 100;
padding: 25px;
width: 100px;
height: 100px;
background-color: green;
}
.flex-container {
height: 400px;
display: flex;
flex-wrap: wrap;
background-color: #f2f2f2;
padding-top: 20px;
margin-bottom: -150px;
justify-content: center;
}
<div class="flex-container"></div>
<img class="footer-logo" src="https://placehold.it/100x100" alt="100x100" />