Z-Index on Absolute Positioned Element Shows Above Higher Z-Index Elements

jobinstwood

New Member
I am trying to create some javascript that when an object is added to the window, a listener listens for any click on the body except for the placed object and removes the object if anywhere on the window except the actual object itself is clicked.Through numerous unsuccessful attempts, the idea I came up with is to dynamically add an overlay div to the screen called overlay2 (or whatever, it doesnt matter) and then listen for clicks on that div. When I add the overlay to the window and set the zIndex to a higher number than the top element already placed (say 5000) and then set the zIndex of the only object to be placed above the overlay to an even higher number (say 6000), the overlay still appears on top of everything and I cannot select any of the objects in the div I meant to place above it.\[code\]var overlayDiv = document.createElement('div'); overlayDiv.setAttribute('id', 'overlay2'); overlayDiv.style.zIndex = '5000'; overlayDiv.style.width = '100%'; overlayDiv.style.height = '100%'; overlayDiv.style.left = '0'; overlayDiv.style.top = '0'; overlayDiv.style.position = 'absolute'; document.body.appendChild(overlayDiv); $(container).append(template); template.style.zIndex = '6000'; //Listeners //Page click listener. Closes the tool when the page is clicked anywhere but inside the parent. var initialClick = false; $('body').on('click.editObjectListeners', function(event) { var target = EventUtility.getTarget(event); if(initialClick) { console.log(target.id); if(target.id == 'overlay2' && target.id != '') { $(overlayDiv).remove(); finish(); }; } initialClick = true; });\[/code\]I've determined that this has everything to do with the absolute positioning of the overlayDiv. While testing, if I used absolute positioning to place the template and if I append the template object directly to the body like I did the overlayDiv, the zIndex works above the overlayDiv as I originally anticipated. Unfortunately absolutely positioning this element doesn't make much sense for me beyond testing purposes. Is there a way to get around this?
 
Top