html - 单击按钮时出现“弹出窗口” - 如何使用 CSS 定位它？

Question

我希望它被定位在内容之上，所以我认为绝对定位是要走的路，所以它不会把其他东西推开。

但是，我想确保它位于单击它的按钮下方。如果我使用绝对位置并将右侧设置为 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;
}