Javascript z索引没有将div定位到另一个的顶部

我有以下代码：

    <div class="centered"  >
        <div class="vinyl" id="vinyl1" style="z-index:2;"></div>
         <div style="z-index:5;">
          <img src="images/center-image.png"/>
          </div>
        </div>
     </div>
<style>
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -230px;
  margin-left: -250px;
}
</style>
<script>
var div = document.getElementById('vinyl1');
var property = getTransformProperty(div);
if (property) {
    var d = 0;
    setInterval(
        function () {
            div.style[property] = 'rotate(' + (d++ % 360) + 'deg)';
        },
        100
    );
}
</script>

如您所见，id为vinyl1的div会旋转。 但是，我想在里面找到这个div的中心，一个静态div和一个静态图像。在演示中，它位于div下面，上面有360号 我试着把z-index放进去

z索引不起作用，它仍在下面显示 如何将图像精确定位在中心位置？

---

您可以看到演示。

您应该将包含360图像徽标的div放在乙烯基div内

像这样：

<div class="vinyl" id="vinyl1" style="z-index:2;">
    <div style="z-index:5;">
       <img src="images/center-image.png"/>
    </div>
</div>

当然，为image_holder div添加顶部和左侧的值，以将其定位在中心

---

希望有帮助。

您应该将包含360 image徽标的div放在乙烯基div内

像这样：

<div class="vinyl" id="vinyl1" style="z-index:2;">
    <div style="z-index:5;">
       <img src="images/center-image.png"/>
    </div>
</div>

当然，为image_holder div添加顶部和左侧的值，以将其定位在中心

---

希望有帮助。

静态定位元素不受其z索引属性的影响。也就是说，你必须将位置更改为相对、绝对或固定。看起来像是以需求为中心的孩子。位置：自己固定。居中div{position:fixed；}静态定位元素不受其z-index属性的影响。也就是说，你必须将位置更改为相对、绝对或固定。看起来像是以需求为中心的孩子。位置：自己固定。居中div{位置：固定；}它不工作。请看这里：现在它们一起旋转：关于添加顶部和左侧值-我不想添加它-因为我希望它相对于屏幕大小。所以我需要它以中心为中心，而不是以固定的数字为中心，它将以圆为中心。这就是为什么我建议在圆和图像周围添加一个相对的包装器。这意味着图像持有者正在考虑将额外的换行作为父div。该div位于以百分比为中心的div内。我再试了一次，但无效。我没有为图像固定器添加顶部和左侧值-我需要添加吗？如果是-什么？是的。尝试添加左：150px；顶部：150px；到图像上。它不起作用。请看这里：现在它们一起旋转：关于添加顶部和左侧值-我不想添加它-因为我希望它相对于屏幕大小。所以我需要它以中心为中心，而不是以固定的数字为中心，它将以圆为中心。这就是为什么我建议在圆和图像周围添加一个相对的包装器。这意味着图像持有者正在考虑将额外的换行作为父div。该div位于以百分比为中心的div内。我再试了一次，但无效。我没有为图像固定器添加顶部和左侧值-我需要添加吗？如果是-什么？是的。尝试添加左：150px；顶部：150px；到图像保存器

.extra_wrap {position: relative;}

.image_holder {position: absolute; top: 150px; left: 150px;}