Estou tendo um problema ao criar uma <div>
de mascara e um link para desabilitar essa mascara. Em outro layout que eu tinha funcionava normalmente, agora que estou efetuando a troca ele parou de funcionar. Tenho o seguinte código:
<div class="mascara" style="display: <?php echo ($this->conta_model->user('luz') == '0') ? 'block' : 'none';?>"></div>
<div class="user-controls">
<ul>
<li><a href="javascript:void(0);" id="botao" data-ref="<?php echo $this->conta_model->user('luz');?>"><img src="<?php echo base_url('uploads/shop/'.$luz.'.png');?>" id="imgluz" style="margin-top:-13px;" width="21"></a></li>
</ul>
</div>
Explicando esse código, ele da block
ou none
no display
da .mascara dependendo da informação que está no banco. O Link #botao ele altera essa informação no banco, assim mudando via jQuery
a .mascara para none
ou block
também, mas para isso acontecer o link tem que ser clicavel e por causa da mascará que tem a z-index: 1050
ele não deixa. Já tentei colocar o z-index
do link como 9999
mas não resolveu. O Link é o único que tem que estar em cima da .mascara sobre qualquer circunstância.
CSS .mascara
.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: 1050;
}
z-index
só funciona em elementos posicionados, experimente colocarposition: relative
no linkrelative
,absolute
efixed
mas nada resolveu ;/z-index: 9999 !important;
. Como ja foi falado precisa doposition
relative
ouabsolute
.z-index
não funcionava, coloquei oposition: relative
e funcionou perfeitamente, tks