Javascript 摧毁 z-index

Question

我创造了 jsfiddle 硬币 parent div 和几个孩子 div。我已经正确添加了 z-index，但是一旦我移动 object，z-index 就消失了。 JS 可能有问题，因为我真的不知道如何在其中编程。有人可以帮忙吗？

这是js：

var img = $('#pointer');

var offset = img.offset();
var mouseDown = false;
function mouse(evt) {
    if(mouseDown ==true){
    var center_x = (offset.left) + (img.width() / 2);
    var center_y = (offset.top) + (img.height() / 2);
    var mouse_x = evt.pageX;
    var mouse_y = evt.pageY;
    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
    var degree = (radians * (180 / Math.PI) * -1) + 90;
    img.css('-moz-transform', 'rotate(' + degree + 'deg)');
    img.css('-webkit-transform', 'rotate(' + degree + 'deg)');
    img.css('-o-transform', 'rotate(' + degree + 'deg)');
    img.css('-ms-transform', 'rotate(' + degree + 'deg)');
    }
}

img.mousedown(function (e) {
    mouseDown=true;
    $(document).mousemove(mouse);
});
$(document).mouseup(function (e) {
    mouseDown = false;
})


var resizeHandle = document.getElementById('marker');
var pointer = document.getElementById('pointer');
resizeHandle.addEventListener('mousedown', initialiseResize, false);

function initialiseResize(e) {
    window.addEventListener('mousemove', startResizing, false);
    window.addEventListener('mouseup', stopResizing, false);
}

function startResizing(e) {
   /*pointer.style.width = (e.clientX - pointer.offsetLeft) + 'px';*/
   pointer.style.height = (e.clientY - pointer.offsetTop) + 'px';
}
function stopResizing(e) {
    window.removeEventListener('mousemove', startResizing, false);
    window.removeEventListener('mouseup', stopResizing, false);
}

Answer 1

浏览器呈现带有 transform 的元素与常规元素略有不同。在这种情况下，负数 z-index 似乎被忽略了，因为它的父级有一个转换。如果您稍微重写 html/css 以使所有 z-index 值为正，它就可以工作。

在这种情况下，我已将您 #pointer 的红色轮廓和白色背景移动到 #pointer::before psuedo-element，并更改了 #koule2 的 [=26] =] 到 0.

如果您愿意，也可以将 ::before 替换为实际元素。

#pointer {
    position:absolute;
    height:150px;
    top:82px;
    width:50px;
    left:100px;
}
#pointer::before {
    content: '';
    position: absolute;
    height:100%;
    top:0;
    width:100%;
    border-color: red;
    border-style: solid;
    border-width: 2px 2px 0 2px;
    left:-2px;
    background-color: white;
    z-index: 10;
}

示例：https://jsfiddle.net/x3tqj1h7/

Javascript 摧毁 z-index

Javascript destroying z-index

html

javascript

css

z-index