Div daughter overlapping parent div who has overflow: Hidden

Asked

Viewed 786 times

0

I want the daughter div 'overlap' the father div that has an overflow: Hidden and a fixed size. This parent div is an item from one of a Carrousel library made with JS and it adds a fixed size and an overflow: Hidden and within this div I have another div which is in the case is a custom select made in HTML and JS. I made an example to show what the situation is:

.pai{
  width: 150px;
  height: 60px;
  overflow: hidden;
  border: 3px solid red;
  margin-bottom: 50px;
  text-align: center;
}

.pai.sem-overflow{
  overflow: inherit;
}

.pai .filha{
  width: 70px;
  height: 150px;
  margin: 0 auto;
  border: 3px solid blue;
  margin-top: 15px;
}
<h2>Como está atualmente</h2>

<div class="pai">
    div pai com overflow
    <div class="filha">
        div filha
    </div>
</div>

<h2>Como eu gostaria que ficasse</h2>

<div class="pai sem-overflow">
    div pai <strong>sem overflow</strong>
    <div class="filha">
        div filha
    </div>
</div>

javascript html css

  • It wouldn’t be enough to change the property overflow as you did in the example?

  • As far as I know it’s impossible the way it’s done. Just taking the daughter div from inside the overflow: hidden; or by removing the overflow.

  • I tried to change the property of the overflow, but when doing the slider it gets all broken. I asked because if I use a <select></select> it works even the parent div having the overflow

1 answer

1

The only way to do it would be to remove the overflow from the parent div, perhaps by javascript itself or by css

overflow: visible !important;

If this daughter div only appears after some event, you can reposition the daughter div to another place where there is no parent div with overflow, or remove the overflow after the event.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.