html - anchor 标签不起作用

Question

我不明白为什么我的 <a href>标签不起作用。我在 <ul> 中的页面顶部有完全相同的标签它完美地工作。当我复制并粘贴(也尝试重新输入)完全相同的行时 <div>再往下，它不起作用。封装的文本变成紫色。

围绕<a> 的代码标签的结构如下:

<div class="parallax__layer parallax__layer--deep" >

    <label> Some Text</label>

        <div style="position: absolute;
                left: 30%;
                width: 70%;
                margin-top: 10%;">

                <p style="position: absolute;
                            text-align:center; 
                            border-right: 2px solid #484848;
                            line-height: 125%;
                            color: #484848;
                            width: 70%;
                            font-family: sf_regular;">

                  This the paragraph <br>
                  <b>I want to insert</b>
                  a link in.

                  <br><br>
                  <img src="some_image.png" width = "70px" length = "70px"/>
                  <br><br>

                  <a href="#group5"> This Link </a> wont work!

                  </p>              

        </div>

</div>

<div id="group5" class="parallax__group">


  <div class="parallax__layer parallax__layer--base">
    This is group 5
  </div>

</div>

<ul>效果很好(顺便说一下，它不在任何 <div> 中):

 <nav>
 <ul class="nav">
  <li><a href="#group1">Home</a></li>
  <li><a href="#group2">Features</a></li>
  <li><a href="#group3">Services</a></li>
  <li><a href="#group4">C2A</a></li>
  <li><a href="#group5">Contact Us</a></li>

 </ul>
 </nav>

CSS:

.parallax {
min-height: 600px; /* fallback for older browsers */
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
perspective: 300px;
perspective-origin-x: 100%;
}

.parallax__group {
 position: relative;
 min-height: 600px; /* fallback for older browsers */
 height: 100vh;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
}

.parallax__layer {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 transform-origin-x: 100%;
 }

 .parallax__layer--fore {
  -webkit-transform: translateZ(90px) scale(.7);
  transform: translateZ(90px) scale(.7);
  z-index: 1;
  }

 .parallax__layer--base {linking works fine from here
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 4;
  }

  .parallax__layer--back {
   -webkit-transform: translateZ(-300px) scale(2);
   transform: translateZ(-300px) scale(2);
   z-index: 2;
   }

  .parallax__layer--deep {//group with problematic link
   -webkit-transform: translateZ(-600px) scale(3);
   transform: translateZ(-600px) scale(3);
   z-index: 2;
   }

  #group4 {//group with problematic link
    z-index: 2; /* slide under group 3 and 5 */
   }

   #group4 .parallax__layer--deep {
   background: #f7f7f7
   }

 #group5 {
   z-index: 3; /* slide over group 4 and 6 */
  }

 #group5 .parallax__layer--base {
  background: #484848;
  }

与 <a> 的那一行标签在页面开头工作得很好。我错过了什么？

P.S:我是网络开发新手，但我很确定我的元素的嵌套不会违反 W3C 原则。

Answer 1

会不会是另一个元素被放置在您的链接之上？这可以解释为什么它在悬停时不显示 url。 你说过，你可以检查它 - 但你也可以右键单击链接吗？如果您右键单击该链接并单击“检查元素”(或类似的)，那么在开发工具中选择了哪个元素？