使用Bootstrap时，Css z-index无法正常工作

Question

我有一段代码很稳定，它运行良好，除了网站页脚。我不知道为什么页脚的标题栏没有显示出来，但其他地方都可以显示。你可以在这里看到工作代码的代码块：http://codepen.io/VincentStephens/pen/EjyJKP。这里是一个未正常工作站点的屏幕截图：https://www.dropbox.com/s/y3oxrvzvdvyaai6/Screen%20Shot%202015-05-19%20at%2019.07.47.png?dl=0。

这个代码块通过创建“:before”元素来实现。将菜单文本放入一个“span”中，然后使用“z-index”将“span”定位在“:before”的上面。你可以在照片中看到该元素(请参见照片)，除非我将“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 - 工作中

<h1 class="heading"><span>The Team</span></h1>

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="">[e-mail]</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>

- vincentieo

---

你能发布HTML和未编译的CSS吗？看起来你完全没有提供这个问题的HTML，而且好像在使用Sass之类的东西。在Stack Overflow上，“代码问题”问题必须包含足够的代码以在问题中重现该问题，否则它们将被关闭。 - TylerH

你提到除了页脚之外都运行良好。你的页脚中有'h1'吗？（抱歉，我需要问一下，因为您没有发布该部分的HTML代码） - blurfus

z-index 属性只适用于定位元素。因此，h1.heading span 需要应用 position: relative;、fixed 或 absolute（基本上任何除默认的 static 定位外的属性）。伪元素也可能需要。参见 http://philipwalton.com/articles/what-no-one-told-you-about-z-index/。 - TylerH

我听说过定位，我们来检查一下我是否忘记将其添加到两个元素中。 - vincentieo

那么，它在笔上也不应该工作，对吧？ - connexo

Answer 1

感谢您对理智的支持...这确实是一个位置问题。

页脚也有背景颜色，因此整个元素需要添加position: relative; and z-index: -1;。

任何处于相同情况的其他人的完整代码：

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

- vincentieo