时间戳

首页 > 解决方案 > 如何偏移锚链接以清除固定标题？

html - 如何偏移锚链接以清除固定标题？

问题描述

正如标题所描述的。我正在尝试偏移锚链接，因此它出现在距视口顶部 100 像素处。

这是我到目前为止所尝试的。

<style>
   :target {
      display: block;
      position: relative;
      top: 100px; 
      visibility: hidden;
      }
 </style>

<a href="#01"> Go to link 01</a> 
  
<h2 id="01"> link 01</h2>

编辑:: 我想我想念我正在关注的在线教程。我也试过这个，但仍然无法让它工作。

<style>
   :target {
      display: block;
      position: relative;
      top: 100px; 
      margin: -100px 0;
      }
 </style>

<a href="#01"> Go to link 01</a> 

<h2 id="01"> link 01</h2>

标签： htmlcssanchoroffset

解决方案

单击锚点后，CSS 将应用于 h2。这就是 :target css 的工作原理。单击锚点后，您的代码将隐藏该元素。如果不需要，则将其删除。

现在你让 H2 出现在标题下方的问题。为此，您需要添加绝对位置或固定位置（取决于您的最终 HTML），而不是相对位置。

这是更新的代码

<style>

   :target{
      display: block;
      position: absolute;
      top: 100px; 
      }
 </style>

推荐阅读