Применение абсолютной позиции к изображениям приложения

Question

Мой текущий код отображает один случайный элемент из большого массива по нажатию кнопки, при этом новый элемент размещается в верхней части списка, а размеры таблицы и изображения отображаются в одном столбце. Я хочу, чтобы изображения, созданные с помощью этой кнопки, перетаскивались по всей странице, поэтому я добавил CSS, чтобы попытаться сделать положение абсолютным. Однако это только изменяет способ отображения изображений и не позволяет их перемещать. Как я могу заставить CSS применить к произведенным элементам вместо контейнера?

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 < 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);
}

#draggable {
  position: absolute;
  z-index: 1;
}

<table>
  <tr>
    <td>
      <button class="button button3" align="center" id="final" onclick="display_random_image3();">Word #3</button>
    </td>
  </tr>
  <tr>
    <td width="150px">
      <div align="center" class="container3" id="draggable">
    </td>
  </tr>
</table>