JQuery вставляет слой поверх существующего контента

Question

Я пытаюсь, чтобы новый слой появлялся над существующим содержанием на моем сайте при нажатии на ссылку / кнопку. Я использую jquery - но код, который у меня есть, не работает должным образом.

Вот что у меня есть:

 $(document).ready(function(){
  $("#button").click(function () {
  $("#showme").insertAfter("#bodytag")
  $("#showme").fadeIn(2000);
});

});

Эффект, который я хочу получить, состоит в том, что <div id="showme">...</div> появляется сразу после #bodytag. <div id="showme">...</div> имеет z-индекс выше, чем что-либо еще на сайте, поэтому он должен просто появляться над содержимым сразу после # bodytag.

Спасибо за помощь.

Answer 1

Мне кажется, что для получения желаемого эффекта div, в который вы вставляете #showme, должен быть position: относительный, а #showme должен быть position: absolute. Абсолютное позиционирование забирает элемент из потока документов, позволяя ему находиться над содержимым.

Кроме того, два совета - $ () - это ярлык для $ (document), и вы можете связывать команды jQuery:

$().ready(function(){
  $("#button").click(function () {
    $("#showme").insertAfter("#bodytag").fadeIn(2000);
  });
});

Answer 2

Убедитесь, что #showme имеет position, отличное от static.