-2

我正在尝试制作一个弹出 div，就像您将鼠标悬停在您的用户名上或单击此站点最顶部工具栏上的 StackExchange 单词时显示的那样。

我不是要 ajax 代码等。只是如何定位它。我使用 firebug 查看了他们的代码，但他们没有指定 x 250 y 500 之类的位置。那么这些人如何让它出现在用户名或 StackExchange 字母下方？

4

4 回答 4

1

Stackoverflow 显然使用 JavaScript 来实现弹出窗口如何出现的效果。一个小 jQuery（ $('#mydiv').show(100); ）会为你做这件事）。您可以仅使用带有相邻兄弟选择器的 CSS 来实现类似的效果，如下所示：

div {display: none;}

a:hover + div { display: block;}

'popup' 元素的定位是在中心页面 div 中实现的，其边距设置为“0 auto”。顶栏放置在该元素内，其宽度设置为“100%”，位置设置为“相对”。将 div 的位置声明为相对位置允许您绝对定位子元素相对于父元素的位置，而不是相对于整个页面。

要让您的绝对定位弹出 div 出现在您的 topbar 链接下方，只需将 div 的“top”属性设置为 topbar div 的像素高度，并将其“right”属性设置为适当的像素值以将其放置在您的链接下方。您可以像这样使用 jQuery 动态执行此操作，假设您的链接是块级元素：

var offset = $('#myLink').offset(); 

var newLeft = offset.x; 

var newRight = offset.y + $('#myLink').width(); 

$('#popup').css({

   left : newLeft,
   right : newRight
});
于 2012-10-24T14:05:07.867 回答
0

他们所做的是绝对位置，当您单击或悬停元素时，弹出窗口会从显示无变为显示块。定位由浮动（向左浮动）控制。x 定位是相对于其他元素进行的。在这种情况下，标题元素是 960 像素宽，然后使用 margin:auto 居中。因此弹出窗口将出现在标题元素的左侧。

于 2012-10-24T13:32:51.960 回答
0

position: absolute在实际弹出窗口上使用，并在position: relative放置它的父容器上使用。这样您就可以将它定位到容器中，这将是您放置实际点击事件 div 的位置。

于 2012-10-24T13:33:13.950 回答
0

检查这个小提琴。它有帮助吗？

实际上，你完全可以不使用 JavaScript，使用 javascript 的目的是暂停hide弹出窗口的

于 2012-10-24T13:37:56.133 回答