1

我有以下代码：

    <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.

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

你可以在这里看到演示。

4

1 回答 1

6

您应该将包含 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 添加 top 和 left 值以将其定位在中心。

希望能帮助到你。

于 2012-11-04T23:38:04.147 回答