Question

如下所示：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;}

Answer 1

1）将position:relative添加到#introductionMain div

2）从position:relative div

中删除.overlay

Answer 2

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

Navst被Bootstrap中的覆盖覆盖[仅在safari中]

2 个答案: