锚标签不可点击答案

【问题标题】：Anchor tag not clickable锚标签不可点击
【发布时间】：2018-08-15 19:48:32
【问题描述】：

首先我尝试过：

指针事件：全部；

将锚标签移动到导航栏，效果很好！？

删除所有首页 css 的 css 也可以正常工作。

我认为我与位置有关：相对/绝对，但是，我需要定位，但我不知道如何进行，谢谢。

.front-page{
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #ffffff;
   background-image: url("https://www.transparenttextures.com/patterns/wall-4-light.png");
   z-index: -10;

   &__welcome-text{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 500px;
      font-size: 40px;
      font-family: 'Playfair Display', serif;
      color: $textColorDark;
      text-align: left;

      & .anchor{
         cursor: pointer;
         z-index: 9999;
      }
   }
}

.right-arrow{
   color: $primary-color;
   font-size: 30px;
   opacity: 1;
   text-shadow: 1px 1px 8px rgba(0, 0, 0, .5);
   animation-name: delay;
   animation-duration: 6s;
}

@keyframes delay{
   0%{
      opacity:0;
   }

   85%{
      opacity:0;
   }

   90%{
      opacity:1;
      transform: translateX(0);
   }

   95%{
      transform: translateX(25px);
   }

   100%{
      opacity:1;
      transform: translateX(0);
   }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <link href="https://fonts.googleapis.com/css?family=Work+Sans|Playfair+Display|Montserrat" rel="stylesheet">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
      <link rel="stylesheet" href="css/style.css">
      <title>KW Web Development</title>
   </head>
   <body>
      <!-- HEADER -->
      <nav class="navbar">
         <div class="navbar-link__container">
            <a class="navbar-link" href="about.html"><span class="navbar-link-text about-link__animate">About</span></a>
            <a class="navbar-link" href="portfolio.html"><span class="navbar-link-text portfolio-link__animate">Portfolio</span></a>
            <a class="navbar-link" href="blog.html"><span class="navbar-link-text blog-link__animate">Blog</span></a>
            <a class="navbar-link" href="contact.html"><span class="navbar-link-text contact-link__animate">Contact</span></a>
         </div>
      </nav>


         <div class="main-logo__container">
            <a href="#"><div class="main-logo">
               <img class="main-logo__image" src="images/main-logo.png" alt="Main Logo">
            </div></a>
         </div>



         <!-- WELCOME MESSAGE -->
         <div class="front-page">
            <div class="front-page__welcome-text">
               <h1 class="front-page__welcome-text">Hi ;)<br> I'm Kevin,<br>
                I create modern websites <i class="fas fa-arrow-right right-arrow"></i>
             </h1> <br> <br> <br> <br>
               <a class="anchor" href="about.html">hello</a>
            </div>
         </div>


   </body>
</html>

【问题讨论】：

尝试添加相对于锚标签的位置
不.. 如果您可以运行 sn-p，导航栏链接会获得指针，因为它们工作正常，但底部的 hello 链接我什么也得不到，干杯。

标签： html css

【解决方案1】：

删除.front-page 类上的z-index: -10;。它什么也没做，这就是问题的原因。

【讨论】：

谢谢它的工作，不知道为什么我首先添加了它，这是一个静态首页我想我添加了 z-index 以确保导航栏在滚动时位于顶部，无论如何它已修复我的问题，再次感谢！
所以为导航栏设置一个高 z-index :)