Wie kann ich ein Symbol über einem Bild oder Video positionieren?

Question 1

Wie positioniere ich ein Symbol über einem Bild oder Video? Ich möchte, dass es sich in der unteren linken Ecke des Bildes befindet. Wenn der Benutzer auf das Download-Symbol klickt, wird eine Frage angezeigt, in der er gefragt wird, ob er das Bild herunterladen möchte.

Etwa so:

Relevanter Code

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

Funktioniert diese Methode auch mit Bootstrap 3 Font-Awesome? Vielleicht möchte ich in der unteren linken Ecke eine Schaltfläche wie diese hinzufügen:

Ich verwende das FontAwesome-Downloadsymbol.

Bootstrap tolle Schriftart: https://fontawesome.com/v4.7.0/examples/

Question 2

Sie benötigen einen relativen Container um Ihr Bild und legen dann die Position Ihres Symbols fest: 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="https://stackoverflow.com/questions/54508374/dog.png" download="new-filename"><i class="fas fa-download"></i></a>
</div>

Der Grund, warum Sie Ihr Bild brauchen display: block liegt daran, dass standardmäßig imgsind display: inline und Ihr Bild wird zwischen dem unteren Rand und dem Boden des Containers einen Leerraum haben – Ihr Download-Symbol erscheint also etwas unterhalb Ihres img. Stellen Sie es ein display: block stoppt das.

Question 3

Um zwei Elemente zu überlagern, besteht ein Ansatz darin, ein übergeordnetes Element zu erstellen position: relativeund dann die Überlagerung position: absolute.

In diesem Fall sollte dieses Beispiel funktionieren, bei dem das Download-Symbol ein beliebiges Element sein kann, beispielsweise eine Bootstrap-Schaltfläche.

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

Question 4

Lassen Sie mich eine Variante hinzufügen: Wenn Sie das Symbol in der rechten Ecke eines Bilds mit unbekannter Breite positionieren müssen, funktioniert dies mit der vorherigen Antwort nicht. Sollte einen Wrapper wie folgt einführen:

.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="https://stackoverflow.com/questions/54508374/dog.png" download="new-filename"><i class="fas fa-download"></i></a>
   </div>
</div>

Question 5

Ich denke, Sie können das mit dem lösen Z-Index Eigentum. Versuche dies:

<img style="z-index: 1;" src="https://stackoverflow.com/questions/54508374/dog.png" alt="dog">

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