Position absolue et dépassement caché

Nous avons deux DIV, l'un intégré dans l'autre. Si le DIV externe n'est pas positionné absolu alors le DIV interne, qui est positionné absolu, n'obéit pas au débordement caché du DIV externe ( exemple ).

Y a-t-il une chance de faire en sorte que le DIV interne obéisse au débordement caché du DIV externe sans mettre le DIV externe en position absolue (car cela va gâcher notre mise en page complète)? De plus, la position relative pour notre DIV interne n'est pas une option car nous avons besoin de "grandir" d'une table TD ( exemple ).

Il y a-t-il des alternatives?

Faire extérieur <div>vers position: relativeet intérieur <div>vers position: absolute. Il devrait fonctionner pour vous.

Et position: relativepour la division externe? Dans l'exemple qui cache l'intérieur. Il ne le déplacera pas non plus dans sa mise en page car vous ne spécifiez pas de haut ou de gauche.

Un élément positionné de manière absolue est en fait positionné par rapport à un relativeparent ou au parent relatif trouvé le plus proche. Donc , l'élément avec overflow: hiddendoit se situer entre relativeet absoluteéléments positionnés:

<div class="relative-parent">
  <div class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

.relative-parent {
  position:relative;
}
.hiding-parent {
  overflow:hidden;
}
.child {
  position:absolute; 
}

Vous faites juste divcomme ça:

<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
    <br/>
    <div style="position:inherit; width: 200px; height:200px; background:yellow;">
        <br/>
        <div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
            <br/>
        </div>
    </div>
</div>

J'espère que ce code vous aidera :)