• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

146
Vistas
¿Cómo solucionar un problema de índice z en Bootstrap?

Estoy diseñando este aterrizaje usando Bootstrap y mi propio código. Como puede ver, el menú principal no muestra todo el contenido sobre el HTML. Este es el CSS .

¿Cómo soluciono este problema? Creo que es un problema de índice z. ¿Tengo razón?

Aquí está el código del menú original .

GRACIAS

Aquí hay parte del código del menú css:

 /*----------ESTILOS MENU -----------*/ .menuBtn { height: 30px; width: 30px; position: absolute; right: 20px; top: 10px; z-index: 101; } .menuBtn > span { background-color: var(--color-primario); height: var(--altura-linea); width: 100%; position: absolute; left: 50%; top: 50%; margin: -1px 0 0 -15px; transition: height 100ms; } .menuBtn > span:after, .menuBtn > span:before { content: ''; background-color: var(--color-primario); height: var(--altura-linea); width: 100%; position: absolute; left: 50%; margin-left: -15px; transition: all 200ms; } .menuBtn > span:after { top: -7px; } .menuBtn > span:before { bottom: -7px; } .menuBtn.act > span { height: 0; } .menuBtn.act > span:after, .menuBtn.act > span:before { background-color: #008877; top: 1px; } .menuBtn.act > span:after { transform: rotate(45deg); } .menuBtn.act > span:before { transform: rotate(-45deg); } /* main menu block */ .mainMenu { background-color: var(--color-blanco); position: absolute; left: 0; top: 0; z-index: 100; height: 100%; width: 100%; display: table; text-align: center; opacity: 0; transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transform: scale(0); } .mainMenu.act { opacity: 1; transform: scale(1); } .mainMenu.act ul li { opacity: 1; transform: translateX(0); } .mainMenu ul { display: table-cell; vertical-align: middle; } .mainMenu li { padding: 8px 0; transition: all 400ms 510ms; opacity: 0; } .mainMenu li:nth-child(odd) { transform: translateX(30%); } .mainMenu li:nth-child(even) { transform: translateX(-30%); } .mainMenu li:last-child { transform: none; } .mainMenu a { color: #19b698; display: inline-block; font-size: 18px; } .mainMenu a.suBtn { color: var(--color-blanco); } .act{ background-color: red; }

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

por favor actualice su css así

 /*----------ESTILOS MENU -----------*/ .menuBtn { height: 30px; width: 30px; position: absolute; right: 20px; top: 10px; z-index: 101; } .menuBtn > span { background-color: var(--color-primario); height: var(--altura-linea); width: 100%; position: absolute; left: 50%; top: 50%; margin: -1px 0 0 -15px; transition: height 100ms; } .menuBtn > span:after, .menuBtn > span:before { content: ''; background-color: var(--color-primario); height: var(--altura-linea); width: 100%; position: absolute; left: 50%; margin-left: -15px; transition: all 200ms; } .menuBtn > span:after { top: -7px; } .menuBtn > span:before { bottom: -7px; } .menuBtn.act > span { height: 0; } .menuBtn.act > span:after, .menuBtn.act > span:before { background-color: #008877; top: 1px; } .menuBtn.act > span:after { transform: rotate(45deg); } .menuBtn.act > span:before { transform: rotate(-45deg); } /* main menu block */ .mainMenu { background-color: var(--color-blanco); position: fixed; left: 0; top: 0; z-index: 100; height: 100%; width: 100%; display: table; text-align: center; opacity: 0; transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transform: scale(0); } .mainMenu.act { opacity: 1; transform: scale(1); } .mainMenu.act ul li { opacity: 1; transform: translateX(0); } .mainMenu ul { display: table-cell; vertical-align: middle; } .mainMenu li { padding: 8px 0; transition: all 400ms 510ms; opacity: 0; } .mainMenu li:nth-child(odd) { transform: translateX(30%); } .mainMenu li:nth-child(even) { transform: translateX(-30%); } .mainMenu li:last-child { transform: none; } .mainMenu a { color: #19b698; display: inline-block; font-size: 18px; } .mainMenu a.suBtn { color: var(--color-blanco); } .act{ background-color: red; }
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda