html - 使用粘性图像时，删除页面底部的空白

我在使用position: sticky将图像放置在页面右下角附近的下面的布局中（在flex布局下面）：

.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>

img粘贴在正确的位置，但是flex-container下方有空白，该空白跨越页面的整个宽度，并且高度与img相同（包括填充和边距）。

如何在保留img正确位置的同时不显示空白？

最佳答案

您可以使用等于高度的负边距将其删除。该空间是图像的空间，因为position:sticky将保留流的元素部分：

.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">