html - 无法使用 z-index 更改图像的堆叠顺序

Question

如果我将两个图像放在一个页面上并使它们可拖动，我将无法使用 z-index 更改堆叠顺序：

<img class='dragme'  src='http://s20.postimg.org/bixp6bh0p/clown.jpg' />
<img class='dragme' src='http://s20.postimg.org/ddh45wqnd/t_cateye.jpg ' />

也就是说，无论分配的 z 索引如何，猫眼总是在小丑的顶部。请参阅http://jsfiddle.net/XQbLR/3/。

但是，如果我将图像放在 div 中（带有红色边框的底部图像），那么我可以使用分配给 div 的 z 索引来更改堆叠顺序。

有谁明白这里发生了什么？

谢谢

Answer 1

看起来您需要为您的图像提供idCSS 定义中引用的适当 s 。

<img class='dragme' id="clown" src='http://s20.postimg.org/bixp6bh0p/clown.jpg' />
<img class='dragme' id="cateye" src='http://s20.postimg.org/ddh45wqnd/t_cateye.jpg ' />

http://jsfiddle.net/XQbLR/4/