Overlapping links above the fixed mask

I have to make an effect where the user enters and clicks the link to turn on the light and when they turn off the light . The only problem for now is that the mask is on the screen normally but the links to click and turn the light on and off seem to be down and not click. I tried to use z-index but it did not work. My code:

HTML

<div class="mascara"></div>

<li class="dropdown dropdown-user">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                        <span class="username username-hide-on-mobile">
                        <?php echo $this->conta_model->user('nome', 'first_name');?> </span>
                        </a>

                        <div class="icones-topo">
                            <a href="javascript:void(0);" id="botao"><i class="fa fa-power-off"></i></a>
                            <a href="<?php echo base_url('usuario/configuracoes');?>"><i class="fa fa-cog"></i></a>
                        </div>

                    </li>

CSS

.icones-topo{
    margin-left:6px;
    position: relative;
    z-index:99999;
}

.icones-topo a{
    color:#fff;
    display: inline-block;
}

.mascara{
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    width: 100%;
    margin:0;
    padding:0;
    opacity:.80;
    filter: alpha(opacity=80);
    -moz-opacity: 0.80;
    z-index: 9999;
}