z-indexの指定

質問

黒背景はA枠、B枠に透過処理を施した画像とします。
そして、やりたい事は、

１、A枠とB枠それぞれに対して画像をアップロード（例えばそれぞれを写真A, Bとする）。Absoluteで場所指定の上、それぞれの画像をアップロード。

２、アップロードした写真を上下左右へ移動（矢印ボタンを用意し、Javascriptで操作）。アップした
イメージに対してIDを付与し、操作。

３、確定ボタン押下時に、その時点の黒画像写真上のみの状況をキャプチャしてJPGとして
保存する。

上記を実行したいです。２の処理でz-indexを指定してA枠、B枠上に表示、また矢印で移動する
ところまでは実装が完了致しました。
ただ、A枠上にUPした画像をずっと右へ移動していくと、、、、B枠上にも表示されてしまいます。。。
また、更に右に移動していくと、、、写真外に移動してしまいます。。。

A枠から出たUP画像に関しては、完全に無効となるような、、、もしくは、なんかしらの
対策アイディアや技術をご存じの方、お教えください。（FLASHは利用不可です。）

回答No.1

fujillin · ベストアンサー

よくわかりませんが、要するにトリミングみたいなことができればよいのでしょうか？

枠（仮にdiv要素として)にoverflow:hiddenを指定しておいて、そこへ画像をappendしてあげればよさそうですが…
z-indexの設定もいらなさそうですけれど。

あるいは、ちゃんと自前でトリミングするなら、計算してCSSのclipでクリッピングしても可能かと。

意味が違っていたら、スルーしてください。

お礼

あまり、、、というかCSSについて、本当に知識が無くて、、、でも、このoverflow:hidden
使えそうですね。今からちょっとサイト見ながら色々試してみます。で、その後、再度書き込みますね。
参考になるコメントありがとうございます！！