2

Ah, tem várias algumas coisinhas no CSS que as vezes me estressam!

Tenho um elemento pai responsável por listar vários itens. E dentro desses itens, quando passo o mouse em determinado link, exibi-se um diálogo (ou balão) que mostra umas informações. E esse balão está com position: absolute, com o cenário bem próximo a esse:

    .pai {

        background-color: #ccc;
        overflow: auto;
        max-height: 300px;
    }

    .item {
        background-color: lightblue;
        height: 50px; 
        position: relative;
    }

    .item a{
        padding: 10px;
        display: inline-block;
        text-decoration: none;
        color: #049;
    }

    .dialogo {
        display: none;
    }

    .item a:hover+.dialogo {
        display: block;
        position: absolute;
        background-color: #fff;
        box-shadow: 0 2px 2px #ccc;
        padding: 15px;
        z-index: 1000
    }
<div class="pai">
    <div class="item">
        <a>passe o mouse aqui</a>
        <div class="dialogo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde molestias vel ducimus, delectus recusandae veritatis asperiores reiciendis dicta a, voluptatibus quaerat quis in, sunt quas! Aspernatur dolore odit non illo!</div>
    </div>
    <div class="item">
        <a>passe o mouse aqui</a>
        <div class="dialogo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde molestias vel ducimus, delectus recusandae veritatis asperiores reiciendis dicta a, voluptatibus quaerat quis in, sunt quas! Aspernatur dolore odit non illo!</div>
    </div>
    <div class="item">
        <a>passe o mouse aqui</a>
        <div class="dialogo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde molestias vel ducimus, delectus recusandae veritatis asperiores reiciendis dicta a, voluptatibus quaerat quis in, sunt quas! Aspernatur dolore odit non illo!</div>
    </div>
    <div class="item">
        <a>passe o mouse aqui</a>
        <div class="dialogo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde molestias vel ducimus, delectus recusandae veritatis asperiores reiciendis dicta a, voluptatibus quaerat quis in, sunt quas! Aspernatur dolore odit non illo!</div>
    </div>
</div>

Observe que, ao passar o mouse sobre a .item a, o .dialogo aparece cortado, pelo overflow:scroll ou overflow: hidden.

Problema com overflow e position absolute

Ou seja, parece que o z-index combinado com position: absolute possuem algum tipo de conflito, pois, mesmo com o z-index, parte do diálogo é ocultado.

Existe algum jeito de diblar essa chatisse no CSS?

Tem alguma forma de resolver, sem eu ter que alterar tudo que já fiz ou alterando o mínimo possível?

Observação: Gostaria de resolver só com CSS, sem Javascript, por favor.

9
  • A parte do dialog é cortada devido ao max-height do elemento pai, naum?
    – MagicHat
    Commented 30/06/2018 às 19:13
  • @MagicHat então, mas considerando que eu estou usando um z-index maior, esperava um comportamento diferente. Commented 30/06/2018 às 19:14
  • O z-index vai fazer a parte dele, agora quando você define a altura máxima de 1 elemento, os atributos capazes de manipular esse comportamento são de de altura...
    – MagicHat
    Commented 30/06/2018 às 19:18
  • @MagicHat não só isso. Se o elemento por exemplo não tiver um Width definido e tiver overflow: hidden, ele vai ocultar o absolute dentro dele... Isso é chatão.... queria que o CSS tivesse um jeito mais fácil de resolver isso. Commented 30/06/2018 às 19:21
  • "Ocultar o absolute dentro dele(it self?)...!!!", man se virou ocultista? Do que se tá falando veio? Qual exatamente é o comportamento esperado? kkkk[
    – MagicHat
    Commented 30/06/2018 às 19:24

1 Resposta 1

2

O problema é que position: absolute; não vai afetar a altura do box-model do elemento pai, o corte é por simplesmente o elemento aparecer no limite da altura, não tem o que resolver nisto, talvez o caminho seria mudar a abordagem.

Só pra constar z-index não afeta o elemento para vazar para fora do overflow, ele é para você controlar o posicionamento z dos elementos, o que você deve fazer é definir quem será o elemento relativo, assim os elementos com absolute irão trabalhar a partir dele, para resolver isto crie um elemento avô, um pai e um neto.

O elemento avô, deve ser o elemento sem overflow com position: relative; e do seu elemento .item também, o unico que pode conter o relative é o avô, assim:

    .avo {
        position: relative;
    }

    .pai {
        background-color: #ccc;
        overflow: auto;
        max-height: 300px;
    }

    .item {
        background-color: lightblue;
        height: 50px;
    }

    .item a{
        padding: 10px;
        display: inline-block;
        text-decoration: none;
        color: #049;
    }

    .dialogo {
        display: none;
        position: absolute;
        background-color: #fff;
        box-shadow: 0 2px 2px #ccc;
        padding: 15px;
        z-index: 1000;
    }

    .item a:hover+.dialogo {
        display: block;
    }
<div class="avo">

    <div class="pai">
        <div class="item">
            <a>passe o mouse aqui</a>
            <div class="dialogo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde molestias vel ducimus, delectus recusandae veritatis asperiores reiciendis dicta a, voluptatibus quaerat quis in, sunt quas! Aspernatur dolore odit non illo!</div>
        </div>
        <div class="item">
            <a>passe o mouse aqui</a>
            <div class="dialogo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde molestias vel ducimus, delectus recusandae veritatis asperiores reiciendis dicta a, voluptatibus quaerat quis in, sunt quas! Aspernatur dolore odit non illo!</div>
        </div>
        <div class="item">
            <a>passe o mouse aqui</a>
            <div class="dialogo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde molestias vel ducimus, delectus recusandae veritatis asperiores reiciendis dicta a, voluptatibus quaerat quis in, sunt quas! Aspernatur dolore odit non illo!</div>
        </div>
        <div class="item">
            <a>passe o mouse aqui</a>
            <div class="dialogo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde molestias vel ducimus, delectus recusandae veritatis asperiores reiciendis dicta a, voluptatibus quaerat quis in, sunt quas! Aspernatur dolore odit non illo!</div>
        </div>
    </div>

</div>


No entanto ainda sim existe um problema nessa abordagem toda, conforme posiciona o scroll, ou aumenta o conteudo, os elementos com position: absolute; vão mudar de lugar, então talvez a unica abordagem para evitar tudo isso seja fazer dinamicamente com JavaScript deixando o popup/tooltip se ajustar baseado no getBoundingClientRect() compensando com o elemento "pai" as posições X e Y (e talvez com o scrollTop também entrando na operação matematica para obter o resultado)

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 .