title: Applying absolute position to appendchild images
body: <p>My current code displays one random item from a large array on a button click, with the new item placed on the top of the list, and with the dimensions of the table vs. the image, it displays in one column. I want the images produced by this button function to be draggable around the page, so I added the CSS to try to make the position absolute. However, this only changes the way the images display, and does not allow them to be moved. How can I get the CSS to apply to the produced elements instead of the container?</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>function display_random_image3() {
    var theImages = [{
      name: "Snowglobe",
      src: "/img/vocab/snowglobe.png",
      height: "200",
      width: "200"
    }, {
      name: "Pizza",
      src: "/img/vocab/pizza.png",
      height: "200",
      width: "200"
    }];
  
    var preBuffer = [];
    for (var i = 0, j = theImages.length; i &lt; j; i++) {
      preBuffer[i] = new Image();
      preBuffer[i].src = theImages[i].src;
      preBuffer[i].width = theImages[i].width;
      preBuffer[i].height = theImages[i].height;
    }
  
    // create random image number
    function getRandomInt(min, max) {
      //  return Math.floor(Math.random() * (max - min + 1)) + min;
  
      imn = Math.floor(Math.random() * (max - min + 1)) + min;
      return preBuffer[imn];
    }
  
    // 0 is first image,   preBuffer.length - 1) is  last image
  
    var newImage = getRandomInt(0, preBuffer.length - 1);
  
  
    // display the image  
    var targetContainer = document.getElementsByClassName("container3");
    targetContainer[0].appendChild(newImage);
    targetContainer[0].insertBefore(newImage, targetContainer[0].firstChild);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#draggable {
    position: absolute;
    z-index: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;button class="button button3" align="center" id="final" onclick="display_random_image3();"&gt;Word #3&lt;/button&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td width="150px"&gt;
        &lt;div align="center" class="container3" id="draggable"&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>