1
I have to make an effect where the user enters and click on the link to turn on the light and when to leave turn off the light. The only problem for now is that the mask stays on the screen normally but the links to click and turn the light on and off seems to be below and not to click. I tried to use the z-index but it didn’t help. My code:
HTML and 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;
}<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>
Friend if you can enter the code inside the specific place where you have the "<" and ">" signals is much easier to help...
– MagicHat
@Alisson, would add a snippet, so it would be easier to simulate the problem and propose a solution
– David
The ideal is that the elements you need to click to turn off and on the light, also have absolute positioning.
– Munir Baarini