Estoy desarrollando una página web y estoy utilizando elementos de Bootstrap. Mi problema es que yo he creado mi propia barra de navegación en vez de cogerla de Bootstrap, y el problema es que cuando yo cojo otro elemento de Bootstrap como un carrusel, se me superpone a mi barra de navegación. Quería saber si había alguna propiedad de CSS o alguna otra manera. Muchas gracias de antemano.
-
Edita tu pregunta y agrega un ejemplo mínimo verificable de lo que tienes hasta el momento.– padaleianaCommented el 28 mar. 2021 a las 0:33
-
Invierte el orden en que cargan las librerías en el head de tu html, la que hagas tú siempre debe cargar la última, además debes tener cuidado con los nombres de las clases para tratar de no coincidir con las del framework a menos que lo q quieras sea sobreescribirlas.– JorgeGuzCommented el 4 abr. 2021 a las 6:18
1 respuesta
Es una buena idea compartir código en CodeSandbox o Codepen, o un sitio web publicado, para que podamos ver el problema para confirmar, pero probablemente sea un problema de z-index.
Normalmente si algo está encima de otros elementos—en este caso, los elementos Bootstrap—es porque tiene position: relative
o position: absolute
, y una de las condiciones siguientes:
- aparecen en el DOM después de sus elementos, o:
- tiene
z-index: <numero>
donde el número está más grande que elz-index
de los otros elementos debajo de ello
Si los otros elementos no tienen z-index
, tiene prioridad normal. Los que tienen z-index
tienen más prioridad que los otros, entonces aunque aparecen antes de elementos en el DOM, van a tener más prioridad y se van a poner encima de otros elementos.
Entonces, para solucionar eso, tienes que buscar el z-index
de los elementos encima de sus propios elementos. Por ejemplo, sea que el z-index
es 100. Puede cambiar el z-index
de la navegación a 110 para que sea más grande que los elementos de Bootstrap.
Es mejor aumentar el z-index
por 10 y no 1 en caso de que quieres introducir otro elemento entre ellos.
En el código de Bootstrap carousel, veo que elementos tienen z-index: 1
o z-index: 2
, entonces no es necesario aumentar por mucho. Puedes poner 10, por ejemplo, y sería suficiente.
-
Muchísimas gracias, era eso. Perdón por las molestias:) Commented el 14 abr. 2021 a las 11:06
-
1@PabloBernabeu si la respuesta fue útil por favor márcala "aceptada"– TinaCommented el 16 abr. 2021 a las 1:43