html - 按钮相互堆叠？

Question

我用德语创建了一个网站，当我将它设置为 position:absolute 或 fixed 时，我遇到了像主页这样的按钮相互堆叠的问题。但是当我将它设置为 relative 时它起作用了。谁能给我解释一下？

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>

Answer 1

• 这是 position: absolute|fixed 的预期行为。
• 这些定位使您可以更精细地控制将按钮放置在您真正想要的位置。
• 您可以使用top left right 和bottom 来提供您想要的精确像素完美定位。<

Further reading: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/