Html 按钮堆叠在一起？

我正在用德语创建一个网站，当我将其设置为“绝对”或“固定”位置时，像“主页”这样的按钮会相互堆叠。但当我把它设置为相对时，它就工作了。有人能给我解释一下吗

CSS文件：

#top {
    display: inline-block;
    width: 352px;
    height: 160px;
    color : white;
    background-color: #2D2D2D;
    float: left;
    font-family: century gothic;
    font-size: 25px;
    border: none;
    margin: 0px;
    position: fixed
    }

和html文件：

<nav>
 <a class="weiter" href="Home.html"><button id="top" >Home</button></a>
 <a class="weiter" href="ueberuns.html">
 <button  id="top">&Uuml;beruns</button></a>
 <a class="weiter"><button id="top" id="click">Mitglieder</button></a>
 <a class="weiter" href="gebiet.html"><button  
 id="top">UnserGebiet</button></a>
 <a class="weiter" href="kontakt.html"><button id="top">Kontakt</button></a>
</nav>

• 这是一种预期行为，位置为：绝对|固定
• 这些定位使您能够更精确地控制按钮的放置位置
• 您可以使用

  top

  left

  right

  和

  bottom

  来提供所需的精确像素完美定位

进一步阅读：

---

绝对位置和固定位置都使用DOM作为参考，例如屏幕左上角，并被视为显示的最高优先级。因此，您分配的最后一个“顶级”类将位于顶级。如果将另一个ID分配给其中一个按钮并使用定向CSS指令：

    #Bottom{right:100px;}

你会看到div开始分离

---

因此，总的来说，“固定”和“绝对”将所有分配的项目按html的顺序视为最高优先级，并将它们移动到屏幕的左上角。

感谢您的评论，我意识到！！你能给我们提供两种结果的截图吗？