html - 另一个元素填充后面的链接不可点击

Question

无法点击填充(绿色)后面的“完成我们的提交表单”链接。

所有填充(和相等的负边距)的原因是为了在跳转到长列表中的 anchor 时补偿固定的顶部导航栏。

我试过弄乱 z-index 但这似乎没有任何作用。有什么想法吗？

h3.place-category {
  margin-top: calc(-93px + -1rem);
  padding-top: calc(93px + 1rem);
}

.places-complete-list {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  flex: 0 0 66.66667%;
  max-width: 66.66667%;
}

<div class="container">
  <section class="places-content">
    <p>...</p>
    <p>... To add a place please <a href="/places/submit/">complete our submission form</a>.</p>
  </section>
  <section class="places-complete-list">
    <h3 class="place-category" id="antique-shops"><a href="/places/category/antique-shops/">Antique Shops</a></h3>
    <ul>
      <li>...</li>
    </ul>
  </section>
</div>

Answer 1

将 z-index(1、10 或任何适合您的值)添加到 .places-content。另外，添加position: relative让z-index生效。