0

Faaala meus queridos, estou tentando posicionar um icone dentro e no cantro superior direito de um elemento, porém quando aplico right: 0; meu icone some. Algum mestre dos magos do css por aí?

.btn-redirect {
    display: block;
    text-align: left;
    font-size: 16px;
    color: #000;
    line-height: 50px;
    border-left: 3px solid #7455D4;
    margin-bottom: 10px;
    background-color: #f5f5f5;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 0 -3px rgba(0,0,0,.12), 0 0 2px 0 rgba(0,0,0,.2);
    transition: box-shadow .25s;
    border-radius: 3px;
    padding: 16px;
}
    
.icons {
    position: absolute;
}

.icons span.material-icons {
    color: #5622AC;
    position: absolute;
    z-index: 100;
    /* right: 0; Icone desaparece ao aplicar isso.*/
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
      
            <div class="col s12 m3 l3">
                <div class="icons"><span id="individual" class="material-icons">error_outline</span></div>
                <a id="btn-individual" class="btn-redirect waves-effect waves-light" target="_blank">
                    DF Individual
                </a>
            </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

https://jsfiddle.net/joaofds/u149jtz3/104/

2
  • 1
    Pra responder sua pergunta sem ver código seu código vc vai precisa do Professor Xavier e não do Mestre dos Magos
    – hugocsl
    Commented 11/08/2020 às 21:33
  • 1
    kkkkkkkkk foi a pressa meu bom, um abraço!
    – João
    Commented 11/08/2020 às 21:34

1 Resposta 1

1

No elemento pai vc deve colocar position: relative e ter um tamanho fixo nele, e o elemento que vc quer posicionar deve estar como position: absolute;

https://jsfiddle.net/2xr46an0/

Mudei um pouco a estrutura do seu elemento, ela ficou assim:

<div class="col s12 m3 l3">
  <a id="btn-individual" class="btn-redirect waves-effect waves-light" target="_blank">
    DF Individual
    <div class="icons"><span id="individual" class="material-icons">error_outline</span></div>
  </a>
</div>

e no css adicionei:

#btn-individual {
  position: relative;
}

.icons {
  position: absolute;
  top: 0;
  right: 0;
}
1
  • Muito obrigado mestre dos magos, resolveu resolvendo, gratidao!
    – João
    Commented 11/08/2020 às 21:57

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 .