Question

我正在用德语创建一个网站，并且当我将其设置为位置时，问题就是像家一样堆叠的按钮：绝对或固定。但是，当我把它设置为亲戚时它起作用。有人可以解释一下吗？

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来提供您想要的精确像素完美定位。

进一步阅读：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Answer 2

绝对位置和固定位置都使用DOM作为参考，例如屏幕的左上角，并将其视为显示的最高优先级。就像这样的最后一个＆＃34; Top＆＃34;你指定的课程将在最上面。如果您为其中一个按钮分配另一个ID并使用定向CSS指令：

    #Bottom{right:100px;}

你会看到div开始分开。

总而言之，固定和绝对按照html的顺序将所有已分配的项目视为最高优先级，并将它们移动到屏幕的左上角。

按钮堆叠在一起？

2 个答案: