Изображение с идентификатором не подчиняется javascript, меняющему свой z-индекс (или делает это только иногда)

Question

У меня 5 баннеров, все они размещены на z-index:-100, поэтому они не отображаются при загрузке страницы. Чтобы отобразить баннеры, я просто положил их на z-index:100, чтобы они были поверх всего содержимого на экране. Функции javaScript, отвечающие за показ / скрытие баннеров, в основном работают, за исключением phase_a_end, который не скрывает один раз показанный (или большую часть времени это не делает).

Html для 5баннеры ниже, а также функции js, отвечающие за показ / скрытие баннера, и функцию, которая вызывает функцию show_banner.

До использования z-index для показа / скрытия баннеров я бы установил их наopacity:0 onLoad и сделайте их полностью непрозрачными, когда им нужно было показать. Тем не менее, каждый баннер будет подчиняться мне, кроме этой phase_a_end ... (# 4, начиная сверху)

    <!-- OPPONENT'S PHASE A OVER BANNER -->
<img draggable=false id='end_of_phase_a_banner' name='end_of_phase_a_banner' ondrop="check_drop(event,'banner');" ondragover="allowDrop(event);" src='graphs/board/done_with_phase_a.png' style='position:absolute; z-index:-100; left:31%; top:35.25%; width:45.24%; height:24.25%'>
    <!-- OPPONENT'S PHASE B OVER BANNER -->
<img draggable=false id='opponent_done_banner' name='opponent_done_banner' ondrop="check_drop(event,'banner');" ondragover="allowDrop(event);" src='graphs/board/opponent_done.png' style='position:absolute; z-index:-100; left:31%; top:35.25%; width:45.24%; height:24.25%'>
    <!-- BEGINING OF YOUR TURN BANNER -->
<img draggable=false id='your_turn_banner' name='your_turn_banner' ondrop="check_drop(event,'banner');" ondragover="allowDrop(event);" src='graphs/board/your_turn.png' style='position:absolute; z-index:-100; left:31%; top:35.25%; width:45.24%; height:24.25%'>
    <!-- YOUR PHASE A OVER BANNER -->
<img draggable=false id='phase_a_end' name='phase_a_end' ondrop="check_drop(event,'banner');" ondragover="allowDrop(event);" src='graphs/board/phase_a_end.png' style='position:absolute; z-index:-100; left:31%; top:35.25%; width:45.24%; height:24.25%'>
    <!-- Y0UR PHASE B OVER BANNER -->
<img draggable=false id='phase_b_end' name='phase_b_end' ondrop="check_drop(event,'banner');" ondragover="allowDrop(event);" src='graphs/board/phase_b_end.png' style='position:absolute; z-index:-100; left:31%; top:35.25%; width:45.24%; height:24.25%'>

function show_banner(banner_name) {
    var banner = parent.document.getElementById(banner_name);
    banner.style.zIndex = 100;
    var hidebans = setTimeout(function(){hide_banner(banner_name);},2000);
}

function hide_banner(banner_name) {
    var banner = parent.document.getElementById(banner_name);
    banner.style.zIndex = -100;
}

function force_end_of_phase_a() {
    show_banner('phase_a_end');
    play_sound('end');
    var epa = setTimeout(function() {parent.document.forms.end_phase_a.submit();},2500);
}

Нет ошибок в консоли браузера.

РЕДАКТИРОВАТЬЕсли подумать, проблема может возникнуть из-за того, что функция вызывается из фрейма, чей родитель отличается от ожидаемого, даже если я проверил все ссылки на используемые скрипты (как подтвердит последняя строка последней функции (отправка формы)), который выполняется каждый раз (так что родитель в области действия ошибки определенно правильный). Если вы хотите увидеть это в действии, вам потребуется доступ к daregame.net.