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
.
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.
dialog
é cortada devido aomax-height
do elementopai
, naum?z-index
maior, esperava um comportamento diferente.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...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.