Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Elementos e Hierarquia

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Posicionando mais elementos e atividade Posicionando uma imagem com box-sizing

por Vanderson Aparecido Dos Santos
| 64k xp | 24 posts

E por exemplo, gostaria de de criar aquelas box suspensa de informação que geralmente encontramos em jogos ou coisas do tipo, aí teria o código:

HTML

  <div class="box"> <!-- Essa sendo a pai -->
    <div class="hint"> <!-- Essa sendo um dos filhos hehe -->
      <span class="hint-icon">?</span>
      <div class="hint-tooltip">O jogo contém questões de temas variados, divirta-se enquanto testa seus conhecimentos!
        Aproveite a jornada :D</div>
    </div>
    <!-- Continua o código -->

CSS

.box {
    position: absolute;
    width: 702px;
    height: 440px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border-radius: 27px;
    border: 1px solid #c4c4c4;
    box-shadow: 0px 4px 68px #00000040;
  }
  
    .hint {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }
  
  .hint-icon {
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 24px;
    color: #0968EC;
    cursor: help;
  }
  
  .hint-tooltip {
    position: fixed;
    top: 50px;
    right: 20px;
    max-width: 300px; 
    background-color: #ffffff;
    border: 1px solid #c4c4c4;
    border-radius: 5px;
    padding: 10px;
    display: none;
    font-family: "Titillium Web", Helvetica;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }
  
  .hint:hover .hint-tooltip {
    display: flex;
  }

Esse box-sizing me ajudaria a fazer essa balão ignorar o pai e sobrepor ele? Pesquisei mas não achei nada que me ajudasse, pois a intenção era fazer com que ele ao aparecer 'saísse" para a direita vazando para além da div pai. Em outros testes me deparei com situações parecidas de organização e hierarquia e sempre fica a dúvida.

2 respostas
solução!
por Renan Lima
| 3620.9k xp | 7623 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Vanderson.

Tudo bem?

Entenda que box-sizing é uma propriedade CSS que altera a forma como o navegador calcula as dimensões de um elemento. Existem dois valores principais para esta propriedade: content-box e border-box.

  • content-box: Este é o valor padrão e faz com que o navegador calcule a largura e a altura do elemento baseado apenas no conteúdo do elemento, ignorando padding e border.

  • border-box: Este valor faz com que o navegador calcule a largura e a altura do elemento incluindo o padding e a border, mas ignorando a margin.

No seu caso, você quer que o balão de informação (a div com a classe .hint-tooltip) ignore o elemento pai (a div com a classe .box) e sobreponha-o. Para isso, você não precisa usar a propriedade box-sizing. O que você precisa é ajustar o posicionamento do elemento.

No seu código CSS, você definiu a propriedade position como fixed para a classe .hint-tooltip. Isso faz com que o elemento seja posicionado em relação à janela do navegador, e não ao elemento pai. Se você deseja que o balão de informação seja posicionado em relação ao elemento pai, você deve usar a propriedade position com o valor absolute, assim como você fez com a classe .hint.

Aqui está um exemplo de como você pode modificar o seu código:

.hint-tooltip {
  position: absolute;
  top: 50px;
  right: -50px; /* Ajuste este valor para mover o balão de informação para a direita */
  /* Restante do código */
}

Dessa forma, o balão de informação será posicionado 50px abaixo do topo do elemento pai e 50px para a direita do lado direito do elemento pai, fazendo com que ele "vaze" para além da div pai. Leia sobre o position: absolute ele tem a capacidade de se sobrepor a outros elementos, isso vai te ajudar.

Espero ter ntendido e conseguido ajudar. Qualquer dúvida manda aqui. Bons estudos!

por Vanderson Aparecido Dos Santos
| 64k xp | 24 posts

Renan, tudo certo!

Testei aqui e funcionou, depois de muito procurar e não ter algum retorno considerável pra situação acabei focando em outros projetos.

Agradeço pela atenção, e auxílio na resolução. Agora sei onde direcionar mais tempo de estudo hehe