Наложение div div над другим div, с jQuery, если возможно

У меня есть «новостной» div и «баннер».
Я хочу, чтобы пользователь увидел div «banner» при загрузке страницы. Этот «баннер» div должен показывать над «новостями» div точно по позиции, охватывающей «новостной» div. Так:

Как мне сделать, чтобы определить положение div «news» и показать «баннер» div, плавающий, не влияя на структуру сетки?
Любой плагин jQuery, который позволяет пользователю скрыть этот div и никогда не показывать его снова? w / cookie?

Надеюсь, вы поняли мою идею. Я оставляю изображение:

Изображение, описывающее мою проблему

Я понимаю, что на этот вопрос уже был дан ответ, но я подумал, что предлагаю небольшую альтернативу, используя CSS, jQuery и плагин cookie jQuery :

HTML:

<div class="container"> <div class="news"> <p>Lorem ipsum dolor sit amet...</p> </div> <div class="banner"> <p>Yet more text, this time it's the banner.</p> <span class="close">X</span> </div> </div> <div id="clear">Remove the cookie</div>

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 Fiddle .

Немного более приятная демонстрация с 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 в начальной, if проверить, чтобы убедиться, что они больше не видят баннер (если они не оставляют более 30 дней между посещениями) , изменив его на:

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

используйте смещение jquery http://api.jquery.com/offset/

и шоу jquery и скрыть http://api.jquery.com/show/

вы можете использовать hte отрицательный запас для баннера, чтобы перейти к новостям … div.

Дайте мне знать, если вам нужно что-нибудь…

используйте абсолютную должность для новостного баннера.

Я написал для вас сценарий , который должен помочь.

Он использует плагин Cookie для jQuery.

Я добавил некоторые комментарии в код, поэтому, надеюсь, он должен быть довольно понятным.

Не стесняйтесь возвращаться с другими вопросами, которые могут возникнуть у вас.

Применение
Вы должны увидеть баннер при первой загрузке, а затем снова запустить заново, и он должен исчезнуть.
Баннер будет располагаться точно над списком новостей, используя абсолютное позиционирование, ширину / высоту и верхнее / левое смещение списка новостей.