title: Overlaying image in HTML
body: <p>I am creating a simple interactive doll dress up game where the user can pick different attributes to assign to the doll through three separate drop down menus, such as hair colour, dress type, etc.
  I have a base image that is in a div which I want to overlay the images onto.</p>
  
  <pre><code>&lt;div id="display_here"&gt; 
  &lt;img src="base.png" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The images are called by a function:</p>
  
  <pre><code>function createDoll(userChoice) {
  var output = document.getElementById("display_here");
  output.innerHTML = "";
  
  
  var links = [
      "redhair.png",
      "blondehair.png",
      "brownhair.png",
  ];
  
  var choices = ["Red", "Blonde", "Brown", "Vintage", "Skater", "Plaid", "Heels", "Brogues", "Pumps"];
  
  var img = '&lt;img src="' + links[userChoice] + '"&gt;';
  
  output.innerHTML = img;
  }
  </code></pre>
  
  <p>I have given each option in the select menu a value which corresponds to the value in var choices, here is the hair colour option:</p>
  
  <pre><code>&lt;p&gt;
  What hair will your doll have?
  &lt;select name="choice" id="choice" onchange="createDoll(this.value)"&gt;
  &lt;option value="0"&gt;Red&lt;/option&gt;
  &lt;option value="1"&gt;Blonde&lt;/option&gt;
  &lt;option value="2"&gt;Brown&lt;/option&gt;
  &lt;/select&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>So for each option I want it to overlay onto the base image but nothing I have tried seems to work. The only thing I seem to be able to find on this is the 'position:relative' and 'position:absolute' solution but since my images are not in a div this won't work. Can anybody thing of anything that might work?</p>