引導輪播會阻止錨標簽工作

Question

自從我在網站上添加了一個引導輪播后，所有的a標簽突然停止工作。 有誰知道我該如何解決？ 這是我的代碼。

 body {} .nav { width: 100%; height: 1%; background-color: #d2d6d5; z-index: 5; } .awesomelinks { color: #000000; font-size: 18px; padding: 7%; display: inline; z-index: 2; margin-top: 15px; } .awesomelinks:hover { color: rgba(57, 196, 232, 1.00); font-size: 18px; text-decoration: none; } #about { margin-left: 0%; } .thingy { position: absolute; top: 0%; width: 100%; } .carousel { position: asbolute; top: 24px; } .first-slide { width: 100%; z-index: -1; } .second-slide { width: 100%; z-index: -1; } .third-slide { width: 100%; z-index: -1; } 

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div class="nav"> <a href="About-Us.html" class="awesomelinks" id="about">About Us</a> <a href="Donations.html" class="awesomelinks" id="donate">Donate</a> <a href="Our-Team.html" class="awesomelinks" id="team">Our Team</a> <a href="Media.html" class="awesomelinks" id="media">Media</a> <a href="mailto:utunicyclingsociety@gmail.com" target="_blank" id="contact" class="awesomelinks">Contact Us <img src="Jump Around.gif"/> </a> </div> <div class="thingy"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class=""></li> <li data-target="#myCarousel" data-slide-to="1" class=""></li> <li data-target="#myCarousel" data-slide-to="2" class="active"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item"> <img class="first-slide" src="http://www.brucebeckphotography.com/data/photos/631_1090818_5582_85_pano.jpg" alt="First slide"> <div class="container"> <div class="carousel-caption"> <h1>Utah Unicycling Society</h1> <p>Text here</p> </div> </div> </div> <div class="item"> <img class="second-slide" src="http://www.brucebeckphotography.com/data/photos/631_1090818_5582_85_pano.jpg" alt="Second slide"> <div class="container"> <div class="carousel-caption"> <h1></h1> <p></p> </div> </div> </div> <div class="item active"> <img class="third-slide" src="http://www.brucebeckphotography.com/data/photos/631_1090818_5582_85_pano.jpg" alt="Third slide"> <div class="container"> <div class="carousel-caption"> <h1></h1> <p></p> </div> </div> </div> </div> </div> </div> 

如果有人幫助我，這將是巨大的幫助。 非常感謝。

Answer 1

您有一個簡單的CSS錯誤。 從CSS類thingy刪除position: absolute和top: 0% ，就像這樣：

.thingy {
  /* position: absolute; */
  /* top: 0%; */
  width: 100%;
}

Answer 2

您的.thingy類與鏈接重疊！ 因此，要么將它們放低一點，要么將Nav的Z索引增加得比東西高。

.nav {
    position: relative;
    z-index: 100;
}

要么

.thingy {
 top:24px;
}

然后刪除下面的代碼

.carousel {
  position: asbolute;
  top: 24px; 
}