3

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;
}
5
  • O z-index só funciona em elementos posicionados, experimente colocar position: relative no link
    – Miguel
    Commented 11/08/2016 às 16:29
  • Já tentei colocar a position como relative, absolute e fixed mas nada resolveu ;/ Commented 11/08/2016 às 16:30
  • @AlissonAcioli Ele esta utilizado bootstrap? coloca codigo para ver a simular por houve de erro, adicione code snippet, possamos acompanhar.
    – KingRider
    Commented 11/08/2016 às 19:26
  • ja tentou um z-index alto e com important? z-index: 9999 !important;. Como ja foi falado precisa do position relativeou absolute. Commented 17/08/2016 às 11:23
  • Estava utilizando .link { width: 100%; height: 98px; display: block; z-index: 99999; } E o z-index não funcionava, coloquei o position: relative e funcionou perfeitamente, tks Commented 12/03/2019 às 13:16

2 Respostas 2

2

da um float, pois ele precisa estar solto dos outros elementos pro z-index funcionar, caso persista, coloca uma classe na li com o float, position e ai sim a z-index :D

2
+50

Como pode ser visto em https://developer.mozilla.org/pt-PT/docs/Web/CSS/z-index a propriedade z-index se aplica somente em elemento posicionados. Sendo assim, adicionando position: relative; ao elemento #botao deveria fazer com que a propriedade funcionasse normalmente, como no fiddle.

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

#botao {
  position: relative;
  z-index: 1055;
}
<div class="mascara" style="display: block;"></div>
<div class="user-controls">
  <ul>
    <li><a href="#" id="botao" data-ref=""><img src="#" id="imgluz"></a></li>
  </ul>
</div>

Dependendo da sua aplicação, outra solução seria mover o .user-controls para dentro do div.mascara como aqui.

.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;
}
<div class="mascara" style="display: block;">
  <div class="user-controls">
    <ul>
      <li><a href="#" id="botao" data-ref=""><img src="#" id="imgluz"></a></li>
    </ul>
  </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .