Проблема с перекрестным слайдом z-индекса

#javascript #jquery #css #z-index #slideshow

#javascript #jquery #css #z-индекс #слайд-шоу

Вопрос:

Я использую сценарий перекрестного слайда.

Проблема в том, что я не могу переместить div в фоновый режим: слайд-шоу перекрывает все остальные разделы. Пытался изменить z-index: установить z-index 0 в фоновый div, а z-index:2 для всех остальных divs. По-прежнему безуспешно. Есть ли способ применить слайд-шоу к фоновому div?

Моя структура css выглядит так

 <body>
  <div id="bg">
  "all stuff goes here"  
   </div
</body>
  

И css для #bg

 #bg {
 /* Stretch background */
 position:fixed;
 top:0;
 left:0;
 height:100%;
 width:100%;
 z-index:0;
}
  

Ответ №1:

Установите css на:

 #bg {
 /* Stretch background */
 position:fixed;
 top:0;
 left:0;
 height:100%;
 width:100%;
 z-index:0;
}

#test {
    position: relative;
    background-color: red;
    z-index:5;
    width: 120px;
    margin-top:5px;
}
  

и html для:

 <body>
    <div id="bg"></div>
    <div id="test">"all stuff goes here"</div>
</body>
  

Также смотрите Мой jsfiddle.

Ответ №2:

Перенесите его на задний план с помощью z-index: -1

Комментарии:

1. вы вообще читаете мой вопрос? «Пытался изменить z-index: установить z-index 0 в фоновый div, а z-index:2 для всех остальных divs. По-прежнему безуспешно «.

2. Да, я это сделал, вы сказали, что изменили значение z-index, но вы ничего не сказали об отрицательных значениях. Попробуйте добавить позицию: абсолютную;

Ответ №3:

вместо того, чтобы присваивать z-index: 0 или -1 вашему идентификатору «bg», сделайте все остальное содержимое z-index равным 99 или более. таким образом, ваш «bg» будет позади ваших слайдов.

Ответ №4:

Правильно ли вы соблюдаете (сложные) правила для наложения контекстов, позиционирования и z-индекса?

https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context

Комментарии:

1. проблема в js raw.github.com/tobia/CrossSlide/master/jquery.cross-slide.js

2. Конечно, но как выглядит сгенерированный HTML-код и как он стилизован с помощью CSS?

3. обратите внимание на выбранный ответ