Html 锚定标签不起作用

我不明白为什么我的

标签不起作用。我在

中的页面顶部有一个完全相同的标签，它可以完美地工作。当我复制并粘贴（也尝试重新键入）更下方的

中完全相同的行时，它不起作用。封装的文本只是变成紫色

标记周围的代码结构如下：

<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>

带有

标记的那一行在页面的开头工作得非常好。我错过了什么

---

p.S:我是web开发人员的新手，但我很确定我的元素嵌套没有违反W3C原则。

我想你使用的是parallax.js插件，它可能会让锚定标签不起作用。尝试删除parallax插件。

可能是在你的链接顶部放置了另一个元素吗？这可以解释为什么它在悬停时不显示url。

---

你说，你可以检查它，但是你也可以右键点击链接吗？如果在链接上单击鼠标右键，然后单击“检查元素”（或类似内容），那么在开发工具中选择了哪个元素？

什么意思

不起作用

？如果无法单击它，请检查

顶部是否没有其他元素（右键单击>检查-必须突出显示

，而不是未关联的其他元素“#组5”指向给定HTML代码中的任何部分。它不会链接到#group5，只是不可单击。即使我将鼠标悬停在它上面，它也不会在左下角显示url（FireFox）。当我检查元素时，它会很好地突出显示

标记，并且我确实验证了

group5

是否存在。@AnkitShubham，请参阅edit@Justinas，请参阅edit.Nope，纯CSS解决方案。链接适用于最顶层，但不适用于最深层..尝试添加此CSS.parallax__层--deep{z-index:5；}你们的权利。有2个分区在包含分区的顶部。我将它们的颜色设置为透明，但我不能删除它们而不失去平行效果。我通过将链接放在顶部分区进行测试，效果很好。你们建议我怎么做？好的，唯一的方法是调整z索引（可以在css中静态显示，也可以在通过JS滚动时显示）。tryna是否避免了这一点，但谢谢，我会选择JS路线

 <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>

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