Question

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

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

Answer 1

Stackoverflow显然使用JavaScript来实现弹出窗口的显示效果。一个小jQuery（$（'＃mydiv'）。show（100）;）将为你做这个）。只使用CSS和相邻的兄弟选择器可以实现类似的效果，如下所示：

div {display: none;}

a:hover + div { display: block;}

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

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

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

var newLeft = offset.x; 

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

$('#popup').css({

   left : newLeft,
   right : newRight
});

Answer 2

他们所做的是一个绝对位置，当你点击或悬停元素时，弹出窗口从显示无到显示块。定位由浮动控制（向左浮动）。 x定位是相对于其他元素进行的。在这种情况下，标题元素宽度为960px，然后使用margin：auto进行居中。所以弹出窗口将显示在标题元素的左侧。

Answer 3

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

Answer 4

检查fiddle。这有帮助吗？

实际上，你可以在没有JavaScript的情况下完成它，使用javascript的迭代是暂停弹出窗口的hide

如何在此网站上定位弹出式div，如个人资料信息

4 个答案: