Css z-index与bootstrap无法正常工作

我有一段可靠的代码。工作正常。除了我的网站的页脚。不知道为什么，但标题栏没有显示页脚，但他们在其他地方？Css z-index与bootstrap无法正常工作

这里的工作代码 http://codepen.io/VincentStephens/pen/EjyJKP

这里笔是不工作的网站的截图： https://www.dropbox.com/s/y3oxrvzvdvyaai6/Screen%20Shot%202015-05-19%20at%2019.07.47.png?dl=0

这是通过创建一个：元素之前。将菜单文本放入一个范围，然后使用z-index将范围放在：before之前。

你可以看到那里的元素（见图），一切都是一样的，但只是不会显示，除非我改变z-索引为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="">[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>

来源

2015-05-19 vincentieo

你能后的HTML和CSS未编译？看起来你完全错过了这个问题的HTML，就像你在使用Sass或其他东西。 Stack Overflow的“代码问题”问题必须包含足够的代码来重现问题中的问题，否则它们将被关闭。 – TylerH

无论如何，你为什么不使用':: after'而不是':: before'？这样，你仍然可以得到相同的效果，但它在文本之后而不是*在*之前开始，所以它不会通过文本。 – TylerH

你提到它的效果很好，除了页脚。你的脚注里有'h1'吗？（对不起，但我需要问一下，因为你没有发布它不工作的部分的HTML） – ochi

感谢您的理智的那一刻....这确实是一个问题的位置。

页脚也有背景颜色。所以整个元素需要添加一个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; 
     } 
    } 
}

来源

2015-05-19 18:34:44 vincentieo

Css z-index与bootstrap无法正常工作

回答

相关问题