Html 导致重叠的位置绝对元素

以下是页面的链接结构：

    <div>
    <h2><a href="#" target="_blank"  class="button one">Digital Marketing </a>
        <a href="#" target="_blank"  class="button one">Video Production </a> 
        <a href="#" target="_blank"  class="button one">Graphics Design </a> 
    </h2></div>

它可以在800px以上的屏幕上正常工作。然而，在我的移动设备上，最后一个链接变得不可点击，因为它与页面上的下一个元素重叠

---

这是CSS位置属性的问题吗？请告诉我如何解决此问题。

只要没有位置：绝对，就可以为元素添加边距。这会将其他元素推离自身一定的距离。

我会尝试给顶部和底部的边距指定一个%的值，而不是px，这样它就可以计算出自己的空间，从而避免重叠

也许有点像这样的实验：

@媒体屏幕和最大宽度：800px{ .按钮{ 显示：块； 利润率：1%自动；

---

}如果你从第一个部分删除position:absolute，它会工作，不知道为什么它会有这种风格。我删除了它，它工作得很好。我在CSS中没有看到任何position:absolute。另外，我尝试添加了margin:1%auto；但是第三个链接仍然不可点击。感谢z-index上的提示。我尝试了添加margin:1%auto；但是第三个链接仍然无法辨认。请帮忙。我会在那个样的情况下安装杀虫剂，并设法解决边界问题

    .button{
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 20px;
    position: relative;
                    padding: 10px;
                    margin: 10px 20px 30px 0 !important;
}
                    
@media screen and (max-width: 800px) {
  .button {
    display:block;
      z-index:above;
  }
}