我该如何将图标定位在图像或视频上方？

Question

我该如何将图标放置在图像或视频上方？我想它位于图像的左下角。当用户单击下载图标时，会出现提示询问他们是否要下载图像。

像这样：

相关代码

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

这个方法也适用于bootstrap 3 font-awesome吗？我可能想在左下角添加一个像这样的按钮：

我正在使用FontAwesome下载图标。

Bootstrap awesome font: https://fontawesome.com/v4.7.0/examples/

- cooldood3490

Answer 1

你需要在图像周围放置一个相对容器，然后将图标设置为 position: 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的下方。将其设置为block可避免此问题。

- Adam

Answer 2

要叠加两个元素，一种方法是将父元素设为position: relative，然后将覆盖元素设为position: absolute。

在这种情况下，该示例应该可以正常工作，其中下载图标可以是任何元素，例如bootstrap按钮。

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

- Charlie Harding

Answer 3

让我补充一种情况，当您需要将图标定位在宽度未知的img元素的右上角时，以前的回答就不适用了。应该引入以下包装器：

.wrapper { display: flex; justify-content: center;}    
.content { position: relative; width: max-content}
.content img { display: block; }
.content .fa-download { position: absolute; bottom:10px; right:10px; }

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

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

- Victor Dias

Answer 4

我认为您可以使用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>

- Piazzi