Tutoriales
Claude Opus 5.5: reparar menús de producto ocultos por la cabecera
Un menú con z-index: 9999 puede seguir detrás de la cabecera.
Hazlo con Panelly
De la inspiración al anuncio de tu producto
Empieza con una imagen y una idea. Crea un anuncio de cuatro viñetas, un conjunto de materiales o un vídeo con Panelly.
Crear con Panelly Edita la propuesta antes de generar.
Un menú con z-index: 9999 puede seguir detrás de la cabecera. Entrega a Claude Opus 5.5 los estilos de sus antecesores y los elementos superpuestos; pide identificar el límite de apilamiento antes de proponer un parche. Subir el número del hijo no lo saca del contexto de su padre.
Distingue síntomas parecidos
Una pregunta comunitaria de 2013 consulta qué propiedades crean contextos. Usa la guía actual de MDN para las reglas: transformaciones, opacidad inferior a 1 y ciertas combinaciones de posición y z-index pueden crearlos. Position: relative por sí solo no siempre basta.
| Síntoma | Evidencia necesaria | Primera dirección de reparación |
|---|---|---|
| Menú bajo una cabecera hermana | Contextos ancestrales y orden de hermanos | Corregir la capa del padre pertinente |
| Menú cortado justo en el borde | Estilos de overflow y recorte | Resolver el recorte por separado |
| Menú fijo se mueve con una tarjeta transformada | Bloque contenedor y rectángulos | Revisar posición y antecesor |
| Diálogo por encima del contenido normal | Uso de la capa superior del navegador | Respetar su modelo independiente |
Resuelve un ejemplo con dos padres
Supón una tarjeta posicionada con z-index: 1, una cabecera hermana con 2 y un menú dentro de la tarjeta con 9999. Las rutas explicativas [1, 9999] y [2] muestran que la cabecera gana en el primer límite. Cambiar 9999 por 999999 no altera esa comparación. El ejemplo numérico local verifica solo ese orden simplificado; no implementa todo el algoritmo de pintura CSS ni demuestra una reparación con Opus.
Decide primero si la tarjeta necesita su contexto. Elimina un desencadenante innecesario solo después de revisar efectos visuales y distribución. Si el menú debe cruzar el límite, considera colocarlo en una capa compartida apropiada. Un portal cambia su posición en el DOM; no arregla automáticamente coordenadas, recorte, eventos ni foco. Conserva el nombre accesible del activador y vuelve a probar apertura, cierre y teclado tras moverlo.
Prompt basado en evidencia
Inspecciona este menú de producto, su activador, todos los antecesores hasta la raíz y la cabecera superpuesta. Aporto DOM, valores calculados de position/z-index/transform/opacity/overflow y rectángulos delimitadores.
Separa problemas de apilamiento, recorte y bloque contenedor. Identifica el primer límite relevante y explica el arreglo mediante la cadena real de antecesores. No aumentes todos los z-index ni elimines todas las transformaciones.
Devuelve el parche mínimo que conserve distribución, animación y nombres accesibles. Si mueves la capa, especifica actualización de coordenadas, desplazamiento, eventos y restauración del foco. Prueba vistas estrechas y amplias, zoom, desplazamiento, apertura y cierre con teclado y montajes repetidos. Marca las pruebas no ejecutadas como pendientes; no declares éxito en navegador sin evidencia.Es un flujo propuesto con referencia a la guía oficial de prompts de Opus, no una evaluación ejecutada del modelo.
Valida en el límite afectado
Captura el mismo estado antes y después del parche. Confirma que el menú previsto se ve, que el resto conserva su orden y que sigue alineado al desplazarse. Revisa el recorte por separado aunque la comparación de capas pase. Registra navegador, tamaño de ventana y resultados reales del teclado.
**¿Todas las capas necesitan el número mayor?** No; los números tienen sentido dentro de su contexto. **¿Mover a body garantiza el arreglo?** No; posición e interacción siguen necesitando pruebas. Para comportamiento modal, consulta la guía de foco de diálogos.
Con la presentación corregida, crea imágenes de campaña relacionadas en Panelly Studio. No se afirma una integración con Opus ni reparación automática de CSS en Panelly.
