html - not - Posición absoluta y desbordamiento oculto

overflow-y scroll not working

Question

Tenemos dos DIVs, uno incrustado en el otro. Si el DIV externo no está posicionado en forma absoluta, entonces el DIV interno, que está posicionado en forma absoluta, no obedece al desbordamiento oculto del DIV externo ( example ).

¿Hay alguna posibilidad de hacer que la DIV interna obedezca el desbordamiento oculto de la DIV externa sin establecer el DIV externo en posición absoluta (porque eso ensuciará nuestro diseño completo)? También la posición relativa para nuestro DIV interno no es una opción, ya que necesitamos "crecer" de un TD de tabla ( exmple ).

¿Hay más opciones?

Answer 1

¿Qué pasa con la position: relative para el div externo? En el ejemplo que oculta el interno. Tampoco lo moverá en su diseño ya que no especifica una parte superior o izquierda.

Answer 2

Un elemento absolutamente posicionado se posiciona realmente con respecto a un padre relative , o el padre relativo encontrado más cercano. Por lo tanto, el elemento con overflow: hidden debe estar entre los elementos de posición relative y absolute :

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

Answer 3

Usted acaba de hacer div s como este:

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

Espero que este código te ayude :)

Answer 4

Haga el <div> externo a la position: relative e interno <div> a la position: absolute . Debería funcionar para usted.