Position absolue et dépassement caché

135

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?

— Zardoz
source

283

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

— Shankhan
source

5

Merci à vous deux. J'ai toujours pensé à la position: relative est la valeur par défaut. Je viens d'apprendre que statique est la valeur par défaut. J'accepte la réponse de Shankhan car les deux réponses sont équivalentes et Shankhan a besoin de plus de points ;-)

— Zardoz

7

Des explications et / ou de la documentation seraient un excellent ajout.

— showdev

26

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.

— Tesserex
source

9

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; 
}

— Si7ius
source

-3

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 :)

— Rochano
source