如果可能的话，用jQuery叠加另一个div的横幅div

我有一个“新闻”div和一个“banner”div。
我希望用户在页面加载时看到“banner”div。 这个“横幅”div应该显示在“新闻”div上，正好在位置上，覆盖“新闻”div。 所以：

• 如何检测“新闻”div的位置并显示“横幅”div，浮动，而不影响网格结构？

• 任何jQuery插件，允许用户隐藏该div而不再显示？ 带cookies？

希望你能理解我的想法。 我留下一张图片：

Answer 1

我意识到这个问题已经得到了解答，但我认为我会提供一个轻微的替代方案，使用CSS，jQuery和jQuery cookie插件 ：

HTML：

 
 
Lorem ipsum dolor sit amet...
 
 
 
Yet more text, this time it's the banner.
 X 
 
 
Remove the cookie 

CSS：

 .container { width: 80%; min-height: 400px; position: relative; border: 4px solid #000; } .news { width: 100%; height: 100%; } .banner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #f00; } .close { position: absolute; top: 0; right: 0; border-left: 2px solid #fff; border-bottom: 2px solid #fff; width: 2em; line-height: 2em; text-align: center; display: block; cursor: pointer; } #clear { width: 80%; text-align: right; color: #fff; background-color: #999; border: 4px solid #000; border-top-width: 0; font-family: arial, sans-serif; cursor: pointer; } 

jQuery的：

 $(document).ready( function(){ if ($.cookie('closed')){ $('.banner').remove(); } $('.close').click( function(){ $(this).closest('.banner').remove(); $.cookie('closed',true, {expires: 30}); }); $('#clear').click( function(){ $.cookie('closed',false, {expires: -200}); }); }); 

JS小提琴演示 。

一个稍微令人愉悦的演示，有animate() ：

 $(document).ready( function(){ if ($.cookie('closed')){ $('.banner').remove(); } $('.close').click( function(){ $(this) .closest('.banner') .animate( { 'top':'120%' }, 1500, function(){ $(this).remove(); } ); $.cookie('closed',true, {expires: 30}); }); $('#clear').click( function(){ $.cookie('closed',false, {expires: -200}); }); }); 

JS Fiddle演示

---

假设您有重复访问者，假设您在重复访问者时可能需要重新设置cookie，以确保他们不会再次看到横幅（除非他们在访问之间留出超过30天） ，将其更改为：

 if ($.cookie('closed')){ $('.banner').remove(); $.cookie('closed',true,{expires: 30}); } 

Answer 2

使用jquery的偏移量http://api.jquery.com/offset/

和jquery的秀和隐藏http://api.jquery.com/show/

你可以使用横幅的负余量来转到新闻… div。

如果你需要帮助，请告诉我…

使用绝对定位新闻横幅。

Answer 3

我为你写了一个应该有用的脚本 。

它使用jQuery的Cookie插件 。

我在代码中添加了一些注释，所以希望它应该是不言自明的。

随意回答您可能遇到的其他问题。

用法
您应该在第一次加载时看到横幅，然后再次单击运行它应该消失。
横幅将使用绝对定位，新闻列表的宽度/高度和顶部/左侧偏移位于新闻列表的正上方。