twitter-bootstrap twitter bootstrap 下拉 z-index 和透明度可见性问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16176988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter bootstrap drop down z-index and transparency visibility issues
提问by MonkeyBonkey
I'm having trouble with my twitter bootstrap dropdown menus getting hidden underneath items and also with its transparency. Example: http://pictorious-web-qa.herokuapp.com
我的 twitter bootstrap 下拉菜单被隐藏在项目下面以及它的透明度时遇到了麻烦。示例：http: //pictorious-web-qa.herokuapp.com
The menu z-index goes below the profile photo when the screen shrinks down to around 400px wide. I checked the media query but couldn't find any z-index settings.
See http://pictorious-web-qa.herokuapp.com/profiles/albertfor an example.
I want to keep the translucency in the menu nav but want to up the solid opacity of the dropdown menu items. I've set the opacity on the menu container directly but that didn't seem to change anything.
The menu also has a z-index problem with the vimeo video on the home page http://www.pictorious.comif you shrink the screen width down to where the nav bar menu overlaps the video. I've also tried setting the z-index to no avail and not sure how to set the wmode in the vimeo default iframe embed technique
当屏幕缩小到大约 400 像素宽时，菜单 z-index 位于个人资料照片下方。我检查了媒体查询，但找不到任何 z-index 设置。
有关示例，请参见http://pictorious-web-qa.herokuapp.com/profiles/albert。
我想在菜单导航中保持半透明，但想提高下拉菜单项的纯不透明度。我直接在菜单容器上设置了不透明度，但这似乎没有改变任何东西。
如果您将屏幕宽度缩小到导航栏菜单与视频重叠的位置，则该菜单还存在与主页http://www.pictorious.com上的 vimeo 视频有关的 z-index 问题。我还尝试将 z-index 设置为无效，并且不确定如何在 vimeo 默认 iframe 嵌入技术中设置 wmode
It's a standard twitter bootstrap nav:
这是一个标准的 twitter bootstrap 导航：
<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>
The only thing that seems to change on the overlapping photo is the margins and padding on the smaller media queries.
重叠照片上唯一似乎发生变化的是较小媒体查询的边距和填充。
回答by MonkeyBonkey
So the answer was that I needed to set position to relative in the default bootstrap carousel and that's why it was not affected by my z-index property.
所以答案是我需要在默认引导轮播中将位置设置为相对，这就是它不受我的 z-index 属性影响的原因。
position: relative; z-index:-1;
回答by jball037
Even if you can't find the z-index settings, you can always override them by writing another class or ID of the same name later in your CSS-- just make another z-index there. Try setting the z-index of the top element lower as well as setting that of the bottom element higher.
即使您找不到 z-index 设置，您始终可以通过稍后在 CSS 中编写另一个同名的类或 ID 来覆盖它们——只需在那里创建另一个 z-index。尝试将顶部元素的 z-index 设置得更低，并将底部元素的 z-index 设置得更高。
