Z-Index на абсолютном позиционированном элементе показывает выше высших элементов Z-индекса

Question

Я пытаюсь создать некоторый javascript, который, когда объект добавляется в окно, прослушиватель прослушивает любой щелчок по телу, за исключением размещенного объекта, и удаляет объект, если в любом месте окна, кроме самого фактического объекта, щелкнут.

В результате многочисленных неудачных попыток идея, которую я придумал, заключается в динамическом добавлении наложения div на экран с именем overlay2 (или что-то еще, это не имеет значения), а затем прослушивание кликов на этом div. Когда я добавляю наложение в окно и устанавливаю zIndex на большее число, чем верхний элемент, уже размещенный (скажем, 5000), а затем установите zIndex единственного объекта, который будет помещен над наложением, на еще большее число (скажем, 6000) , наложение по-прежнему появляется поверх всего, и я не могу выбрать какой-либо из объектов в div, который я хотел разместить над ним.

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

Я определил, что это имеет отношение к абсолютному позиционированию overlayDiv. Во время тестирования, если я использовал абсолютное позиционирование для размещения шаблона, и если я добавлю объект шаблона непосредственно к телу, как я сделал overlayDiv, zIndex работает над overlayDiv, как я и предполагал. К сожалению, абсолютно позиционирование этого элемента для меня не имеет смысла, кроме тестирования. Есть ли способ обойти это?

Answer 1

Оказывается, что z-индекс действительно может быть успешно использован только с элементами с абсолютным размещением. Поэтому первоначальный план решения кулачкового прослушивателя не будет работать. Вместо этого я решил использовать объекты jQuery и listener для прослушивания щелчка. Это гораздо более чистое решение, мне просто пришлось обвести вокруг него голову. You can view my other solution here.

Answer 2

Попробуйте установить zIndex перед добавлением его в container.

template.style.zIndex = '6000'; 
$(container).append(template); 

Answer 3

Я не знаю, сколько это поможет вашей конкретной проблемы, но я случайно заметил, что вы можете иметь проблемы с использованием JQuery «О) (» метод.

Во-первых, вы используете версию jQuery 1.7+ с этим, правильно?

В отличие от «живых», я считаю, что параметры on(): event, , function.

Так где у вас есть это:

$('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; 
    }); 

Я думаю, что вы хотите, это:

$('body').on('click.editObjectListeners', [SOME SELECTOR], function(event) { 
     var target = EventUtility.getTarget(event); 
     if(initialClick) { 
      console.log(target.id); 
      if(target.id == 'overlay2' && target.id != '') { 
       $(overlayDiv).remove(); 
       finish(); 
      }; 
     } 
     initialClick = true; 
    }); 

Надежда, что помогает некоторым маленьким способом.

Удачи вам!