Problem with parent element overflow affecting the visibility of a child element with "position: absolute"

Question

Problem with parent element overflow affecting the visibility of a child element with "position: absolute"

Navigation

#1 by (1 votes)

1

Oh, there are several things in CSS that sometimes stress me!

I have a parent element responsible for listing multiple items. And within these items, when I mouse over a particular link, a dialog (or balloon) is displayed that shows some information. And this balloon is with position: absolute , with the scenario very close to that:

    .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>

Note that by hovering over .item a , .dialogo is cut, by overflow:scroll or overflow: hidden .

That is, it seems that z-index combined with position: absolute have some kind of conflict, because even with z-index , part of the dialog is hidden.

Is there a way to debunk this chatisse in CSS?

Is there any way to solve it, without having to change everything I've done or changing as little as possible?

Note : I would like to resolve with CSS only, without Javascript, please.

css

asked by anonymous 30.06.2018 / 20:26

1 answer

V-for access and display list [closed] importing data extension ".data"

score 1 · Answer 1

The problem is that position: absolute; will not affect the height of the box-model of the parent element, the cut is simply because the element appears at the height limit, there is no way to solve it, maybe the path would be to change the approach .

Just to include z-index does not affect the element to leak out of the overflow, it is for you to control the z position of the elements, what you should do is define who will be the relativo element, so the elements with absolute will work from it, to solve this create a grandfather element, a parent and a grandchild.

The grandfather element should be the non-overflow element with position: relative; and its .item element also, the only one that can contain relative is grandfather, like this:

    .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>

However, there is still a problem with this whole approach, as it positions the scroll, or increases the content, elements with position: absolute; will change places, so maybe the only approach to avoid all this is to do it dynamically with JavaScript leaving the popup / tooltip is set based on getBoundingClientRect() compensating with the element "father" the positions X and Y (and perhaps with scrollTop also entering the mathematical operation to obtain the result)