Css z-index ne fonctionne pas correctement avec bootstrap

J'ai un bloc de code qui est solide. Fonctionne très bien. Sauf pour le pied de page de mon site. Aucune idée pourquoi, mais la rubrique bars ne sont pas visibles pour le pied de page, mais ils sont partout ailleurs?

voici une plume du code de travail
http://codepen.io/VincentStephens/pen/EjyJKP

Voici une capture d'écran du site ne fonctionne pas:
https://www.dropbox.com/s/y3oxrvzvdvyaai6/Screen%20Shot%202015-05-19%20at%2019.07.47.png?dl=0

Cela passe par la création d'un :avant de l'élément. Mettre le menu du texte dans un span, puis en utilisant le z-index à la position de la plage au-dessus de l' :avant.

Vous pouvez voir l'élément (voir photo), tout est la même, mais seulement de ne pas s'afficher à moins que je change le z-index à 0 ou plus, mais alors la ligne est au-dessus de la position du texte dans la durée???

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

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

HTML - Pied de page, pas de travail

<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>
Pouvez-vous poster le HTML et le CSS non? On dirait que vous êtes absent le code HTML de cette question entièrement et comme vous êtes à l'aide de Sass ou quelque chose. "Problème de Code" questions sur un Débordement de Pile inclure assez de code pour reproduire le problème dans la question, ou ils seront fermés.
De toute façon, pourquoi ne pas simplement utiliser ::after au lieu de ::before? De cette façon, vous obtenez toujours le même effet, mais il commence après le texte plutôt que avant, de sorte qu'il ne sera pas aller via le texte.
Vous mentionnez qu'il fonctionne bien sauf pour le pied de page. Avez-vous un h1 dans votre pied de page? (désolé, mais j'ai besoin de demander, puisque vous n'avez pas de poste le code HTML de la section où il ne fonctionne pas)
Il serait le même effet de le mettre avant ou après. J'ai besoin d'un réactif de 100% de la largeur de l'élément, donc de toute façon il va à travers le texte. Sauf si vous connaissez un autre moyen?
z-index s'applique uniquement aux positioned éléments. Donc h1.heading span doit avoir position: relative; ou fixed ou absolute (en gros n'importe quoi mais le défaut static position). Peut-être que le pseudo-élément, trop. Voir philipwalton.com/articles/what-no-one-told-you-about-z-index

OriginalL'auteur vincentieo | 2015-05-19

  1. 1

    Merci pour le moment sur la santé mentale.... c'était en effet une position de sujet.

    Le pied de page a aussi une couleur d'arrière-plan. de sorte que l'ensemble de l'élément nécessaire pour avoir une position: relative; and z-index: -1; ajouté.

    code complet pour quelqu'un d'autre dans la même situation:

    SCSS - wil besoin de compiler

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

    OriginalL'auteur vincentieo