Question

我应该如何将图片放在底部，距离底部20 px，而不是在中间？

谢谢！

.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
display: flex;
align-items: center;
}
#aaa {
  display: block;
  width: 128px;
  height: 128px;
  background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
#aaa:hover {
  background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}

<div class="overlay">
    <a href="" id="aaa"></a>
</div>

Answer 1

删除height并将bottom设置为20px

.overlay {
position: fixed;
bottom: 20px;
left: 0;
display: flex;
align-items: center;
}
#aaa {
  display: block;
  width: 128px;
  height: 128px;
  background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
#aaa:hover {
  background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}

<div class="overlay">
    <a href="" id="aaa"></a>
</div>

Answer 2

虽然其他答案可以解决问题，但我猜你需要将叠加层设为100％高度。因为你需要添加

，这是什么叠加

 position:fixed;
 bottom:10px;

到#aaa

＆＃13;

.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
display: flex;
align-items: center;
}
#aaa {
  display: block;
  width: 128px;
  height: 128px;
  position:fixed;
  bottom:10px;
  background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
#aaa:hover {
  background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}

＆＃13;

<div class="overlay">
    <a href="" id="aaa"></a>
</div>

＆＃13;

固定图片到底部

2 个答案: