引导轮播会阻止锚标签工作

Question

Since I added a bootstrap carousel to my website, all the a tags suddenly stopped working. Does anyone know how I can fix it? Here's my code.

 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> 

I t would be a huge help if anybody helped me on this. Thank you so much.

Answer 1

You have a simple CSS error. Remove position: absolute and top: 0% from the CSS class thingy , like that :

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

Answer 2

you .thingy class is overlapping with the links! So either place them little lower or increase the Z-index of Nav higher than thingy.!

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

OR

.thingy {
 top:24px;
}

and your remove your below code

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