title: Loading an Image in `<div>` overrides html text
body: <p>I'm writing an html page that should have the following behavior:</p>
  
  <ol>
  <li>When loaded it contains an empty <code>&lt;div&gt;</code> with a link inside it.</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/bQevR.png" alt="enter image description here"></p>
  
  <ol start="2">
  <li>Once pressed the link runs the script <code>StartTrial.js</code> which is supposed to load an image from a directory, visualize it, and give some instructions on what to do.</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/SiM3b.jpg" alt="enter image description here"></p>
  
  <p>However, as you can see, once the image is loaded it covers the instructions. This is cause the instructions are written in a <code>&lt;div&gt;</code> that has a margin of 30px from the container <code>&lt;div&gt;</code> with its size before loading the image. How can I fix my code so that the text is always shown with a 30px margin from the bottom of the image?</p>
  
  <p>Here are my code snippets:</p>
  
  <p><strong>Html</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
   &lt;a href="javascript:StartTrial()" id="startTrial"&gt;Start Trial&lt;/a&gt;
   &lt;img class="displays" id="t1_img" src="./images/immi.jpg"&gt;
  &lt;/div&gt;
  
  &lt;div class="instruction" id="instr_1"&gt;
      &lt;p&gt;&lt;b&gt;Instruction:&lt;/b&gt;&lt;p&gt; 
      &lt;p&gt;Some text here.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#container {
      position: relative;
      background: gray;
      width: 300px;
      height: 300px;
      margin: 30px;
  }
  
  .displays {
      position: absolute;
      display: none;
      top: 0px;
      left: 0px;
  }
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>function StartTrial() {
  
      $('#startTrial').hide();
      $('#t1_img').show();
      $('#instr_1').show();
  
  }
  </code></pre>