twitter-bootstrap CSS z-index 无法与引导程序正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30333091/
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
Css z-index not working correctly with bootstrap
提问by vincentieo
I have a block of code that is solid. Works fine. Except for the footer of my site. No idea why but the heading bars are not showing for the footer but they are everywhere else?
我有一个可靠的代码块。工作正常。除了我网站的页脚。不知道为什么，但页脚没有显示标题栏，但它们在其他任何地方？
here is a pen of the working code http://codepen.io/VincentStephens/pen/EjyJKP
这是工作代码的笔 http://codepen.io/VincentStephens/pen/EjyJKP
Here is a screenshot of the not working site: https://www.dropbox.com/s/y3oxrvzvdvyaai6/Screen%20Shot%202015-05-19%20at%2019.07.47.png?dl=0
这是不工作站点的屏幕截图：https: //www.dropbox.com/s/y3oxrvzvdvyaai6/Screen%20Shot%202015-05-19%20at%2019.07.47.png?dl=0
This works by creating a :before element. Putting the menu text into a span, then using z-index to position the span on top of the :before.
这通过创建一个 :before 元素来工作。将菜单文本放入跨度，然后使用 z-index 将跨度定位在 :before 的顶部。
You can see the element there (see photo), everything is the same but just won't show unless I change the z-index to 0 or higher but then the line is above the heading text in the span???
你可以在那里看到元素（见照片），一切都一样，但除非我将 z-index 更改为 0 或更高，否则不会显示，但该行位于跨度中的标题文本上方？？？
h1.heading {
color: $light-gold;
text-transform: uppercase;
font-size: 32px;
font-weight: 300;
line-height: 40px;
font-family: SourceSansPro;
span {
background-color: $golden-black;
display: inline-block;
z-index: 1;
padding-right: 10px;
}
}
h1.heading:before {
content: "";
background-color: $light-gold;
display: block;
position: relative;
top: 23px;
width: 100%;
height: 6px;
z-index: -1;
}
HTML - working
HTML - 工作
<h1 class="heading"><span>The Team</span></h1>
HTML - Footer, not working
HTML - 页脚，不起作用
<div class="fluid-container footer">
<footer class="container">
<div class="col-lg-4">
<h1 class="heading"><span>About</span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bestiarum vero nullum iudicium puto. Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Quae sunt igitur communia vobis cum antiquis, iis sic utamur quasi concessis; De illis, cum volemus. Duo Reges: constructio interrete. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere.</p>
</div>
<div class="col-lg-4">
<h1 class="heading"><span>Address</span></h1>
<p class="address">
address<br>
</p>
<p class="address">
Tell: 0207 374 6141 <br>
Email: <a href="">[email protected]</a>
</p>
</div>
<div class="col-lg-4">
<h1 class="heading"><span>Connect</span></h1>
<img src="img/social-media.png" width="186" height="46">
<h1>Payment Options</h1>
<img src="img/payment-cards.png" width="267" height="56">
</div>
</footer>
</div>
回答by vincentieo
Thanks for the moment on sanity.... it was indeed a position issue.
感谢关于理智的时刻......这确实是一个立场问题。
The footer also has a background colour. so that entire element needed to have a position: relative; and z-index: -1;added to it.
页脚也有背景色。所以整个元素都需要position: relative; and z-index: -1;添加一个。
full code for anyone else in same situation:
在相同情况下其他人的完整代码：
SCSS - wil need compiling
SCSS - 需要编译
.fluid-container.footer {
position: relative;
z-index: -1;
background-color: $light-golden-black;
footer {
h1.heading {
color: $light-gold;
text-transform: uppercase;
font-size: 32px;
font-weight: 300;
line-height: 40px;
font-family: SourceSansPro;
position: relative;
span {
background-color: $light-golden-black;
display: inline-block;
z-index: 1;
padding-right: 10px;
position: relative;
}
}
h1.heading:before {
content: "";
background-color: $light-gold;
display: block;
position: absolute;
top: 23px;
width: 100%;
height: 6px;
z-index: -1;
}
}
}
