0

我的 twitter bootstrap 下拉菜单隐藏在项目下方以及它的透明度时遇到问题。示例： http: //pictorious-web-qa.herokuapp.com

在此处输入图像描述

  1. 当屏幕缩小到大约 400 像素宽时，菜单 z-index 位于个人资料照片下方。我检查了媒体查询，但找不到任何 z-index 设置。

    有关示例，请参见http://pictorious-web-qa.herokuapp.com/profiles/albert 。

  2. 我想在菜单导航中保持半透明，但想提高下拉菜单项的不透明度。我直接在菜单容器上设置了不透明度，但这似乎并没有改变任何东西。

  3. 如果将屏幕宽度缩小到导航栏菜单与视频重叠的位置，该菜单也会与主页http://www.pictorious.com上的 vimeo 视频存在 z-index 问题。我还尝试将 z-index 设置为无济于事，并且不确定如何在 vimeo 默认 iframe 嵌入技术中设置 wmode

这是一个标准的推特引导导航：

<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>

重叠照片上唯一似乎发生变化的是较小媒体查询的边距和填充。

4

2 回答 2

3

所以答案是我需要在默认引导轮播中将位置设置为相对，这就是它不受我的 z-index 属性影响的原因。

position: relative; z-index:-1;
于 2013-04-24T14:50:15.217 回答
0

即使您找不到 z-index 设置，您也可以通过稍后在 CSS 中编写另一个同名的类或 ID 来覆盖它们——只需在此处创建另一个 z-index。尝试将顶部元素的 z-index 设置得较低，并将底部元素的 z-index 设置得较高。

于 2013-04-23T18:53:12.190 回答