html - 单击按钮时出现 "pop-overs"- 如何使用 CSS 定位它？

Question

我希望它定位在内容之上，所以我认为绝对定位是可行的方法，这样它就不会把其他东西推开。

但是，我想确保它位于单击它的按钮下方。如果我使用绝对位置并将 right 设置为 0(按钮位于页面的右侧，因此我将弹出窗口放置在那里)它会起作用，但如果我使页面变宽或变窄，它会相应地移动。

如何让它粘在按钮下方的区域而不是将任何内容推开？

Answer 1

使用绝对位置和 z-index。

这使 popup 在窗口中居中:

.popup {
    position:absolute;
    display:block;
    width:200px;
    left:50%;
    margin-left:-100px; //half of the width
    top:50px;
    z-index:9;
}