html - seleccionar - selectores avanzados css

Mostrar elemento hijo arriba del elemento padre 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 hijo por encima del padre (fuera de él) usando solo CSS?

EDITAR: Lo siento, tal vez debería aclarar que quiero decir "arriba" en el eje z. Y sí, ya he probado el índice z. Mi problema es que cuando el elemento hijo es más grande que el elemento principal, se produce un efecto de "marco" o "ventana", que corta parte del div.

Answer 1

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

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

Answer 2

Hacerlo de esta forma:

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

Posición de uso: absoluta eliminará el espacio vacío dejado por el niño cuando se desplace hacia arriba.

Editar: después de leer su actualización: posición: absoluta también se aplica a esta situación. Se saca al niño del padre. Luego usas los márgenes para posicionarlo como quieras.

De esta manera usted puede hacer al niño más grande que el padre y por encima de él.

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

Answer 3

Puede establecer un margen negativo para su elemento padre, compensado por el relleno, por ejemplo, margen izquierdo: -100px; Relleno-izquierda 100px. Eso le dará 100 píxeles a la izquierda donde el niño puede superponerse y aún estar en la parte superior.

Answer 4

Puede usar la definición de posición para posicionarla relativa o absolutamente en la página. ES DECIR:

Para mostrarlo directamente arriba, reemplazaría 100px en esta declaración con el tamaño de la caja secundaria.

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

Answer 5

Si está seguro de que necesita hacer esto, intente poner

margen superior: -100px; en el elemento hijo o sin embargo, se necesitan muchos px para que aparezca arriba.

Answer 6

Set overflow: visible; en el div padre

#parent {
    overflow: visible;
}

Cambiado para reflejar la actualización de la persona que pregunta.