CODEWITHSUNDEEP
javascripthtmlcssz-index
Mr. T.
Mr. T.

Reputation: 3

Javascript destroying z-index

I have made jsfiddle cointaing parent div and few childs divs. I have properly added z-index, but as soon as i move object the z-index is gone. The JS might be buggy, because I dont really know how to program in it. Can anyone please help?

Here is the 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);
}

Upvotes: 0

Views: 95

Answers (1)

Thomas
Thomas

Reputation: 171

Browsers render elements with a transform a little different from regular elements. In this case it looks like the negative z-index is ignored because its parent has a transform. If you rewrite the html/css a bit to make all z-index values positive, it works.

In this case I've moved the red outline and white background of your #pointer to a #pointer::before psuedo-element, and changed #koule2's z-index to 0.

You can also replace the ::before with an actual element if you prefer.

#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;
}

Example: https://jsfiddle.net/x3tqj1h7/

Upvotes: 1

Related Questions