导航栏被 Bootstrap 中的覆盖覆盖[仅在 safari 中]答案

【问题标题】：Navbar being covered by an overlay in Bootstrap [only in safari]导航栏被 Bootstrap 中的覆盖覆盖[仅在 safari 中]
【发布时间】：2015-09-25 07:38:48
【问题描述】：

如此处所示：http://i.stack.imgur.com/HpoIc.jpg 我使用 Bootstrap 创建了一个导航栏，并为下面的 div 创建了一个颜色覆盖，但导航栏现在被覆盖覆盖。这只发生在野生动物园中。有什么建议吗？

编辑：

HTML：

<div class="jumbotron textLeft wow fadeInLeft" id="introductionMain">
   <div class="overlay" style="height:100vh;">
      <div class="container verticalCenter" id="introductionmainContent">
        <h1>Unleash your <b>Creativity.</b></h1>
        <p>Creativity Through Arts aims to encourage <b><span class="liveType"></span>
        </b> to pursue their artistic paths.</p>
        <p><a class="btn btn-primary btn-lg" href="#performerMain" role="button">For Performers</a>
        <a class="btn btn-primary btn-lg" href="/events" role="button">For Volunteers</a>
       </p>
       <div>
     </div>
   </div>

CSS：

.overlay {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
/*background-color: rgba(255,165,0,0.7);*/
background: -webkit-linear-gradient(45deg, rgba(255,78,80,0.9), rgba(249,212,35,0.9)); /* Chrome 10+, Saf5.1+ */
background:    -moz-linear-gradient(45deg, rgba(255,78,80,0.9), rgba(249,212,35,0.9)); /* FF3.6+ */
background:     -ms-linear-gradient(45deg, rgba(255,78,80,0.9), rgba(249,212,35,0.9)); /* IE10 */
background:      -o-linear-gradient(45deg, rgba(255,78,80,0.9), rgba(249,212,35,0.9)); /* Opera 11.10+ */
background:         linear-gradient(45deg, rgba(255,78,80,0.9), rgba(249,212,35,0.9)); /* W3C */


position: relative;
z-index:9999;
color:white;}

【问题讨论】：

请向您发布 HTML 和任何自定义 CSS，否则我们只是在猜测......
假设你首先有你的<div class="navbar"></div>，然后是你的<div class="jumbotron textLeft wow fadeInLeft" id="introductionMain">，然后它会因为你的css而重叠，注意你如何放置位置：绝对和顶部：0；你还有一个奇怪的高度语法错误：<div class="overlay" style="height:100vh;">
我该如何解决这个问题？

标签： css twitter-bootstrap-3 overlay navbar

【解决方案1】：

从“.overlay”类中删除除背景和颜色之外的所有样式属性。

.overlay {
  background: -webkit-linear-gradient(45deg, rgba(255,78,80,0.9),     rgba(249,212,35,0.9)); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(45deg, rgba(255,78,80,0.9),     rgba(249,212,35,0.9)); /* FF3.6+ */
  background:     -ms-linear-gradient(45deg, rgba(255,78,80,0.9), rgba(249,212,35,0.9)); /* IE10 */
  background:      -o-linear-gradient(45deg, rgba(255,78,80,0.9), rgba(249,212,35,0.9)); /* Opera 11.10+ */
  background:         linear-gradient(45deg, rgba(255,78,80,0.9), rgba(249,212,35,0.9)); /* W3C */
  color:white;
}

【讨论】：

【解决方案2】：

1) 将position:relative 添加到您的#introductionMain div

2) 从您的 .overlay div 中删除 position:relative

【讨论】：

这使得下面的内容覆盖在下面，而不是图片。 imgur.com/AfsUkqB
好的，我明白了。一旦您将#introductionMain 设置为绝对定位，它就会失去占用其内容所占用空间的能力。如果您从“.overlay”类中删除了除背景和颜色之外的所有样式属性怎么办？
太棒了@Paul，我会将其添加为答案，以便您接受。