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の上部と左側の値を追加して、中央に配置します。

それが役に立てば幸い。

于 2012-11-04T23:38:04.147 に答える