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

Question

我有以下布局，我使用 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 的正确位置？

Answer 1

您可以使用等于高度的负边距将其删除。该空间是图像的空间，因为 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">