z-index does not work on link

Asked

Viewed 1,635 times

3

I’m having a problem creating a <div> masking and a link to disable this mask. In another layout that I had worked normally, now that I am performing the exchange 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, he gives block or none in the display of .masquerade depending on the information in the bank. Link #boot it alters this information in the bank, thus changing via jQuery to .masquerade for none or block also, but for this to happen the link has to be clickable and because of the mask that has the z-index: 1050 it does not let. I have tried to put the z-index of the link as 9999 but it didn’t. Link is the only one that has to be on top of .masquerade under any circumstances.

CSS .masquerade

.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 css html5 css3

  • The z-index only works on positioned elements, try placing position: relative on the link

  • I’ve tried to put the position as relative, absolute and fixed but nothing solved ;/

  • @Alissonacioli It is used bootstrap? puts code to see the simulate by error, add code snippet, we can track.

  • already tried a high z-index and with Important? z-index: 9999 !important;. As has been said, need the position relativeor absolute.

  • It was using . link { width: 100%; height: 98px; display: block; z-index: 99999; } And the z-index didn’t work, I put the position: relative and worked perfectly, Tks

2 answers

2

As can be seen in https://developer.mozilla.org/pt-PT/docs/Web/CSS/z-index the z-index property applies only to positioned elements. Thus, adding position: relative; to the element #botao should make the property function 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 the .user-controls into the div.mascara as here.

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

2

of the one float, because he needs to be free of the other elements pro z-index function, if persists, puts a class in the li with the float, position and so the z-index :D

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.