Javascript DIV图纸复制和优先级

我有一个JSFIDLE，我正在这里工作

：

如您所见，我创建了一个3D列类型的图像。我想复制这一点，并将复制移动到右侧和原始的顶部，以便它们重叠。我已经试着弄明白了，但还没弄明白，所以如果有任何帮助，我将不胜感激

代码如下：

.ultra{
位置：相对位置；
高度：200px；
宽度：200px；
溢出：隐藏；
背景色：白色；
z指数：1；
}
.sub_ultra{
位置：绝对位置；
底部：0；
高度：100px；
宽度：200px；
溢出：隐藏；
背景颜色：灰色；
边缘顶端：5em；
z指数：1；
}
.右侧{
高度：390px；
宽度：177px；
溢出：隐藏；
背景颜色：黄色；
左边距：10em；
边缘顶部：-7em；
位置：绝对位置；
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
变换：旋转（-45度）；
z指数：-1；
}
.底侧{
高度：380px；
宽度：142px；
溢出：隐藏；
背景色：红色；
左边距：7.1米；
边缘顶部：-6.8em；
位置：绝对位置；
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
变换：旋转（-45度）；
z指数：-1；
}

---

这可以通过将图像包装在相对位置的容器中并使用jQuery clone创建另一个副本来轻松实现

HTML

Js（无jQuery）

新Css

.container {
  position: relative;
  margin-top: 20px;
  display: inline-block;
}
.shifted {
  position: absolute;
  top: -20px;
  right: -20px;
}

---

我可以让这个工作在小提琴，但当我把它应用到我的网站建设它没有做任何事情。。。你知道为什么吗？可能我没有正确地包含JS。在脚本标记中，看起来像这样-->我有以下-->$（“.image wrap”）.clone（）.appendTo（“.container”）.addClass（“移位”）；它告诉我它“找不到变量“$”，那么您可能没有使用jQuery。使用标记为No jQuery的js代码。您可以忽略jQuery块中的代码。我现在使用的是无jQuery解决方案，但它将克隆放在原始块的正下方。在解决方案的“移位”部分中，空格阻塞了它，但是现在，如果没有空格，它将图像的类Wrapshift…您确实需要在类名之间留出空格<代码>“移位”是正确的。你说空间挡住了它是什么意思？

$(".image-wrap").clone().appendTo(".container").addClass("shifted")

var node = document.querySelector(".image-wrap").cloneNode(true);
node.className = node.className + " shifted";
document.querySelector(".container").appendChild(node);

.container {
  position: relative;
  margin-top: 20px;
  display: inline-block;
}
.shifted {
  position: absolute;
  top: -20px;
  right: -20px;
}