Estoy teniendo problemas con mi twitter bootstrap menús desplegables llegar oculto debajo de los elementos y también con su transparencia. Ejemplo: http://pictorious-web-qa.herokuapp.com

twitter bootstrap desplegable z-index y la transparencia de los problemas de visibilidad

  1. El menú de índice z va debajo de la foto de perfil cuando en la pantalla
    se encoge alrededor de 400px de ancho. He comprobado la consulta de medios de comunicación, pero
    no pudimos encontrar ningún índice z configuración.

    Ver http://pictorious-web-qa.herokuapp.com/profiles/albert para un
    ejemplo.

  2. Quiero mantener la transparencia en el menú de navegación, pero quiere hasta el
    sólido opacidad de la lista desplegable de elementos de menú. He establecer la opacidad en
    el menú contenedor directamente, pero que no parece cambiar nada.

  3. El menú también tiene un z-index problema con el vídeo vimeo en el hogar
    página http://www.pictorious.com si se reduce el ancho de la pantalla hacia abajo
    donde la barra de navegación del menú se superpone a la de vídeo. También he intentado
    ajuste el z-index en vano y no sabe cómo establecer el wmode en
    el vimeo defecto iframe incrustar técnica

Es un estándar de twitter bootstrap nav:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="/">Pictorious!</a>
      <div class="btn-group pull-right" id="nav-login">
            <a class="btn"  href="/login">Sign-In</a>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="/">Home</a></li>
          <li><a href="/challenges">Challenges</a></li>
                    <li><a href="/about">About</a></li>

                        <form class="navbar-search pull-left form-search" action="/search">
                            <input type="text" class="search-query span2" placeholder="Search" name="keyword">
                        </form>
                    </li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>

Lo único que parece cambiar en la superposición de la foto es el de los márgenes y el relleno en las pequeñas consultas de medios de comunicación.

  • Donde es un código? Donde están las capturas de pantalla? Por favor, no pregunte a la depuración de un sitio web para usted.
  • fragmento de código añadido y la captura de pantalla añadido
InformationsquelleAutor MonkeyBonkey | 2013-04-23

2 Comentarios

  1. 3

    Por lo que la respuesta fue que necesitaba para establecer la posición relativa en el valor predeterminado de bootstrap carrusel y es por eso que no fue afectada por mi z-index de la propiedad.

    position: relative; z-index:-1; 
    • un millón de gracias , no había opción de dar 1000 upvotes o de lo contrario, podría haber hecho eso 🙂
  2. 0

    Incluso si usted no puede encontrar el z-index de configuración, siempre se pueden reemplazar por escrito a otra clase o ID del mismo nombre en el CSS– acaba de hacer otro z-index no. Prueba a configurar el z-index de la parte superior del elemento inferior, así como la configuración que de la parte inferior del elemento superior.

    • He intentado ajustar el z-index de configuración, pero no parece hacer una diferencia..
    • Yo tenía un problema similar que resultó causada por el «overflow: hidden» en un div padre. La solución fue fácil para mí, ya que, después de su revisión, se determinó que no tenía la necesidad de la overflow: hidden nunca más, así que me lo quitaron. Que corrige este problema.

Dejar respuesta

Please enter your comment!
Please enter your name here