title: Adding an image on another image as a button
body: <p>I created a gallery. </p>
  
  <p>The gallery is divided in to 4 a row grid. You can select images and with Javascript I place the images in the grid.</p>
  
  <p>This is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let column1 = document.getElementsByClassName('column1')[0];
  let column2 = document.getElementsByClassName('column2')[0];
  let column3 = document.getElementsByClassName('column3')[0];
  let column4 = document.getElementsByClassName('column4')[0];
  
  
  
  let column = 1;
  
  document.getElementById('picField').onchange = function (evt) {
      let tgt = evt.target || window.event.srcElement,
          files = tgt.files;
      for (let x = 0; x &lt; files.length; x++) {
          // FileReader support
          if (FileReader &amp;&amp; files &amp;&amp; files.length) {
              let fr = new FileReader();
              fr.readAsDataURL(files[x]);
              fr.onload = function () {
  
                  let img = document.createElement("img");
                  img.src = fr.result;
  
                  let removeButton = document.createElement("img");
                  removeButton.src = "remove.png";
  
                  if (column == 1) {
                      column1.appendChild(img);
                      column++;
                  } else if (column == 2) {
                      column2.appendChild(img);
                      column++;
                  } else if (column == 3) {
                      column3.appendChild(img);
                      column++;
                  } else if (column == 4) {
                      column4.appendChild(img);
                      column = 1;
                  }
              }
  
          }
  
          // Not supported
          else {
              // fallback -- perhaps submit the input to an iframe and temporarily store
              // them on the server until the user's session ends.
          }
      }
  
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      box-sizing: border-box;
  }
  
  body {
      margin: 0;
      font-family: Arial;
  }
  
  .row {
      display: flex;
      flex-wrap: wrap;
      padding: 0 4px;
      margin: 30px 60px;
      background-color: lightgray;
      border-style: ridge;
  }
  
  /* Create four equal columns that sits next to each other */
  .column {
      flex: 25%;
      max-width: 25%;
      padding: 0 4px;
  }
  
  .column img {
      margin-top: 4px;
      margin-bottom: 4px;
      vertical-align: middle;
      width: 100%;
      z-index: 1;
  }
  
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
      .column {
          max-width: 50%;
      }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
      .column {
          max-width: 100%;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="load"&gt;
          &lt;input type="file" name="picField" id="picField" size="24" onchange="preview_2(this);" alt="" accept="image/*"
              multiple /&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="column column1"&gt;
          &lt;/div&gt;
          &lt;div class="column column2"&gt;
          &lt;/div&gt;
          &lt;div class="column column3"&gt;
          &lt;/div&gt;
          &lt;div class="column column4"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;script src="/app.js"&gt;&lt;/script&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  
   Now I added an extra image: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let removeButton = document.createElement("img");
                  removeButton.src = "remove.png";</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://www.flaticon.com/free-icon/close_579006#term=cross&amp;page=1&amp;position=18" rel="nofollow noreferrer">This removeButton is just a simple 24px red cross</a>. I would like to add this removeButton to the right corner of every image. When an user clicked the removeButton the image has to be deleted from the gallery.</p>
  
  <p>The Javascript implementation is not that hard I suppose. When the image and the removeButton share the same parent. I can select the parent and remove it.</p>
  
  <p>But i failed to get the layout right. I tried to make the image relative and the removeButton absolute. But then the removeButton is displayed absolute to the body, not to the image.</p>
  
  <p>First I added the removeButton as an child of the image. Then I wrap the elements in a div, but noting worked. <a href="https://i.stack.imgur.com/XSKcg.png" rel="nofollow noreferrer">This is what i have in mind.</a></p>
  
  <p>Anybody who can help me to solve this problem?</p>