z-index does not work in link

Question

z-index does not work in link

Navigation

#1 by (2 votes)
#2 by (2 votes)

3

I'm having a problem creating a% masks% and a link to disable this masquerade. In another layout that I had worked normally, now that I'm making the switch it stopped working. I have the following code:

<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>

Explaining this code, it% s of% or <div> in%% of .mask depending on the information in the database. The #botao link changes this information in the database, thus changing via block to .mask to none or display too, but for this to happen the link has to be clickable and because of the masquerade that has jQuery it does not leave. I already tried to put none of the link as block but it did not work. The Link is the only one that has to be on top of .mask on any circumstance.

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

html html5 css css3

asked by anonymous 11.08.2016 / 18:28

2 answers

Is it possible to execute CSS commands in javascript? HTML How to calculate fixed date in php?

score 2 · Answer 1

2

of a float , since it must be free of the other elements pro z-index works, if it persists, put a class in li with float , position and yes yes z-index : D

11.08.2016 / 19:34

score 2 · Answer 2

As seen at link the z-index property applies only in positioned element. Therefore, adding position: relative; to the #botao element should make the property work normally, as in 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>

Depending on your application, another solution would be to move .user-controls to div.mascara as here . p>

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