html - 如何定位我的弹出窗口？

Question

我有一个弹出窗口，通过以下方式启用：

<input type="button" value="S&ouml;k" onClick="getElementById('popupD').style.display=''">

相关的 DIV 是

<div class="popup" id="popupD" 
<% if(!showSearch) { %>
style="display: none;"
<% } %>
>
<%@ include file="handlaggarelist.jsp" %>
</div>

弹出窗口出现但在页面上太高了。弹出窗口的 CSS 是

.popup{
    border-color: #000; 
    border-style: groove; 
    border-width: 2px; 
    padding: 0px; 
    background-color: #FFF;
    font-size: 70%;
}

你能帮我定位弹出窗口，否则它会出现在页面顶部吗？

谢谢

Answer 1

您可以将弹出窗口绝对定位在页面上，如下所示：

.popup{
    border-color: #000; 
    border-style: groove; 
    border-width: 2px; 
    padding: 0px; 
    background-color: #FFF;
    font-size: 70%;
    position: absolute;
    top: 200px;
}

这将使弹出窗口出现在距页面顶部 200 像素处。

Answer 2

在弹出窗口中添加 position:absolute, top 设置为距 top 和 z-ndex 可接受的距离。确保 z-index 是一个非常高的数字。像 10000。这会将您的弹出窗口呈现在其他元素之上。