我如何定位在图像的图标？

Question

如何定位在图像上FontAwesome下载图标？我想这是在图像的左下角。当用户点击下载图标，出现提示，询问他们是否要下载的图像。

像这样：

相关代码

<!-- font awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<!-- download icon -->
<a href="https://loremflickr.com/320/240/dog" download="new-filename"><i class="fas fa-download"></i></a>

<!-- image of dog -->
<img src="https://loremflickr.com/320/240/dog" alt="dog">

请问这种方法也与引导3字体真棒工作？我可能要添加像这样的按钮左下角：

引导真棒字体：https://fontawesome.com/v4.7.0/examples/

Answer 1

你需要一个相对容器周围的图像，然后你设置你的图标是位置：absolute。

.container { position: relative; }
.container img { display: block; }
.container .fa-download { position: absolute; bottom:0; left:0; }

<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/>

<div class="container">
   <img src="https://placekitten.com/300/300">
   <a href="dog.png" download="new-filename"><i class="fas fa-download"></i></a>
</div>

为什么你需要你的img是display: block是因为，在默认情况下，img的是display: inline和您的IMG将有它的底部和容器的底部之间的空间的原因 - 让你的下载图标将您img略低于出现。将它设置为display: block停止此。

Answer 2

要覆盖两个元素，一个方法是使父母position: relative，然后覆盖position: absolute。

在这种情况下，本实施例应该工作，其中，所述下载图标可以是任何元件，例如自举按钮。

.img-download {
  position: relative;
}

.img-download > a {
  position: absolute;
  background: white;
  bottom: 0;
  left: 0;
}

<!-- font awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="img-download">
  <!-- image of dog -->
  <img src="https://loremflickr.com/320/240/dog" width="320" height="240" alt="dog">
  
  <!-- download icon -->
  <a href="https://loremflickr.com/320/240/dog" download="dog.jpg"><i class="fas fa-download"></i> Download</a>
</div>

Answer 3

我想你可以使用z-index物业解决这个问题。尝试这个：

<img style="z-index: 1;" src="dog.png" alt="dog">

<a style="z-index:2" href="dog.png" download="new-filename"><i class="fas fa-download"></i></a>