Mostrar el elemento hijo encima del elemento principal usando CSS

Question

Tengo dos divs, uno anidado dentro del otro. El elemento padre tiene un ancho/alto definido. ¿Cómo puedo mostrar el div de niño encima del padre (fuera de él) usando solo CSS?

EDIT: Perdón, tal vez debería aclarar que me refiero a "arriba" como a lo largo del eje z. Y sí, ya probé z-index. Mi problema es que cuando el elemento secundario es más grande que el elemento primario, da como resultado un efecto de "marco" o "ventana", cortando parte del elemento div.

Answer 1

Conjunto overflow: visible; en el elemento primario div.

#parent { 
    overflow: visible; 
} 

Se ha modificado para reflejar la actualización del asker.

Answer 2

Si está seguro de que tiene que hacer esto, entonces trate de colocar

margin-top: -100px; en el elemento secundario o cuantos píxeles se necesitan para que aparezca arriba.

Answer 3

Puede usar la definición de posición para posicionarla relativamente o absolutamente en la página. IE:

Para mostrarlo directamente arriba, reemplazará 100px en esta declaración con el tamaño del cuadro secundario.

 
.child{ 
    position: relative; 
    top: -100px; 
} 

Answer 4

hacerlo de esta manera:

.child { 
position: absolute; 
margin: -100px; 
} 

Usando position: absolute se librará del espacio vacío dejado por el niño cuando se desplaza hacia arriba.

Editar - después de leer su actualización: posición: absoluta también se aplica para esta situación también. Saca al niño del padre. Luego usa los márgenes para posicionarlo como lo desee.

De esta forma puede hacer que el niño sea más grande que el padre y encima de él.

.parent{ 
height: 50px; 
width: 50px; 
} 
.child { 
position: absolute; 
height: 100px; 
width: 100px; 
margin: -75px 0 0 -75px; 
} 

Answer 5

Similar a lo que dijo Chacha, debe darle al padre una posición de pariente y al niño una posición de absoluta, luego darle al niño la parte superior: -100px.

¿El padre tiene el desbordamiento establecido en oculto? Eso podría obstaculizar tus esfuerzos.

Answer 6

Puede establecer un margen negativo para su elemento principal, compensado por el relleno, por ejemplo, margin-left: -100px; padding-left 100px. Eso le dará 100px a la izquierda donde el niño puede superponerse y aún estar arriba.