Z-index кнопка закрыть на меню

Работаю над сайтом, и мне нужно сделать меню, которое будет появлятся из кнопки (кнопка после нажатия меняет картинку, но я думаю это не так важно). Так вот, проблема в том, что меню, реализовано через модальное окно, выравненное по правому верхнему углу. А когда оно появляется, то собой перекрывает кнопку открытия и закрытия этого самого меню. Модальное окно - это просто "display: none" тег . Пробовал через z-index, но почему-то не работает. Подскажите как можно реализовать перекрытие кнопкой меню модального окна. Вот код.

/* HTML окна */
<div id="modal-fillip" class="container">
            <div class="row">
                <div class="col-1 offset-11">
                    <img id="modal-fillip-close" src="images/close.png" onclick="modal_fillip_close()">
                </div>
            </div>
            <div class="row">
                <div class="col-4">
                    <img id="fillip" src="images/fillip.png">
                </div>
             <div class="col-8">

        </div>
    </div>
</div>

/* HTML Меню */
<div class="col-1">
   <p class="text-right">
      <img id="menu" src="images/menu.png" onclick="menu()">
   </p>
</div>

/* JavaScript */
function menu(params) {
    if (counter == 0){
        var menu = document.getElementById("menu");
        var head = document.getElementById("header");
        var modal = document.getElementById("modal-menu")
        modal.style.display = "block";
        menu.style.zIndex = "999";
        modal.style.zIndex = "1";
        menu.src = "images/close.png";
        head.style.transitionProperty = "filter";
        head.style.transitionDuration = "250ms";
        head.style.filter = "brightness(40%)";
        counter++;
        document.onmousewheel=document.onwheel=function(){ 
            return false;
        };
    }else{
        var head = document.getElementById("header");
        var menu = document.getElementById("menu");
        var modal = document.getElementById("modal-menu")
        modal.style.display = "none";
        menu.style.zIndex = "999";
        menu.src = "images/menu.png";
        head.style.transitionProperty = "filter";
        head.style.transitionDuration = "250ms";
        head.style.filter = "brightness(100%)";
        counter--;
        document.onmousewheel=document.onwheel=function(){ 
            return true;
        };
    }
};