Question

我有以下代码：

    <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下面，并且上面有数字360）我试着把z-index。

z-index不起作用，它仍然显示在
如何将图像准确定位在中心？

您可以看到演示here。

Answer 1

您应该将包含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>

并添加位置：相对;乙烯基div和位置：绝对到div里面。

修改

虽然你希望它们一起旋转。如果您不希望它们一起旋转，请将它再次放在外面。不确定标记的其余部分，但这应该做的伎俩。在居中的div中创建另一个容器，并将其置于相对位置。将乙烯基div保留为正常位置，并为包含图像的div添加绝对位置。

这样的事情：

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

和css：

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

当然，为image_holder div添加顶部和左侧值，将其置于中心位置。

希望它有所帮助。

z-index不会将div放在另一个上面

1 个答案: