DIV 绘图重复和优先级

Question

我正在开发一个 jsfiddle here: https://jsfiddle.net/laroy/f9dhrrgg/

如您所见，我创建了一个 3D 列类型图像。我想复制它，并将复制的内容移到原件的右侧和顶部，使它们重叠。我已经尝试弄清楚但无法解决，因此将不胜感激。

代码如下：

.ultra {
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-color: white;
  z-index: 1;
}

.sub_ultra {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 200px;
  overflow: hidden;
  background-color: grey;
  margin-top: 5em;
  z-index: 1;
}

.right_side {
  height: 390px;
  width: 177px;
  overflow: hidden;
  background-color: yellow;
  margin-left: 10em;
  margin-top: -7em;
  position: absolute;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: -1;
}

.bottom_side {
  height: 380px;
  width: 142px;
  overflow: hidden;
  background-color: red;
  margin-left: 7.1em;
  margin-top: -6.8em;
  position: absolute;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: -1;
}

<div class="ultra">
  <div class="sub_ultra"></div>
</div>

<div class="right_side"></div>
<div class="bottom_side"></div>

Answer 1

这可以通过将图像包装在相对定位的容器中并使用 jQuery 克隆创建另一个副本来轻松完成。

jQuery Fiddle

No jQuery Fiddle

HTML

<div class="container">
  <div class="image-wrap">
    <div class="ultra">
      <div class="sub_ultra"></div>
    </div>

    <div class="right_side"></div>
    <div class="bottom_side"></div>
  </div>
</div>

jQuery

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

Js（没有 jQuery）

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

新的 CSS

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