Z-index слои слоев

Question

Я ужасен в css, пожалуйста, потерпите меня.

Три элемента: .subscribe, #pictures, #menu.

Этим трем нужно, чтобы .subscribe и #menu были наложены поверх изображений. Css ниже (все селекторы верны). Я думал, что z-index и позиционирование сделает это, однако, это не сработает.

Что-то явно не так? Спасибо.

#slideshow * {
  margin: 0;
  padding: 0;
}
#slideshow {
  position: relative;
  padding: 14px 0 15px;
  width: 926px;
  height: 335px; 
}
#slideshow #pictures { 
  background: url('images/bg.jpg');
  width: 926px;
  height: 335px;
  left: 0;
  overflow: hidden;
}
#slideshow #pictures li {
  display: block;
  position: absolute;
  top: 0;
  width: 926px;
  z-index: -1;
}
#slideshow #pictures li img {
  display: block;
  position: relative;
  bottom: 0;
}
#slideshow #menu {
  list-style-type: none;
  right: 0;
  padding-top: 290px;
  padding-right: 20px
  position:relative;
}
#slideshow #menu li {
  display: block;
  float: right;
  z-index: 3;
}
#slideshow #menu li a {
  display: block;
  font: 11px "Lucida Grande", "Verdana";
  text-decoration: none;
  padding: 7px 0 7px 28px;
  z-index: 3;
  color: #ccc;
  line-height: 14px;
  vertical-align: middle;
}
#slideshow #menu li a:hover {
  color: #fff;
}
#slideshow #menu li.current a {
  font: 15px "Georgia";
  color: #fff;
  padding: 5px 0 5px 28px;
  line-height: 18px;
}
#slideshow #pictures .subscribe {
  height: 91px;
  width: 252px;
  position: relative;
  margin-top: 100px;
  float: left;
  bottom: 0;
  z-index: 2;
  background: url('images/SubscribeButton.png');
}
#slideshow #pictures .subscribe:hover {
  background: url('images/SubscribeButton-Dark.png');
}

Наценка:

<div id="slideshow">    
      <ul id="pictures">
        <li style="visibility: hidden; zoom: 1; opacity: 0; "> <a class="subscribe"></a><img src="style/images/sample1.jpeg" alt="Slide 1" title="Sample 1" style="display: none; width:926px; height:335px "></li>
        <li style="visibility: hidden; zoom: 1; opacity: 0; "><a class="subscribe"></a><img src="style/images/sample2.jpeg" alt="Buenos Aires" title="Buenos Aires" style="display: none; width:926px; height:335px "></li>
        <li style="visibility: hidden; zoom: 1; opacity: 0; "><a class="subscribe"></a><img src="style/images/Slideshow-Image1.jpg" alt="Our design team creates the perfect collections of white shirts each season" title="Creation" style="display: none; width:926px; height:335px "></li>

      </ul>

      <ul id="menu">
        <li><a href="style/images/sample1.jpeg">three</a></li>
        <li><a href="style/images/sample2.jpeg">two</a></li>
        <li><a id="first" href="style/images/Slideshow-Image1.jpg">one</a></li>

      <li class="background" style="visibility: hidden; zoom: 1; opacity: 0; left: 0px; top: 188px; width: 166px; height: 28px; "><div class="inner"></div></li></ul>
    </div>

Answer 1

Я думаю, что вы близко.Но для простоты я бы просто поместил z-индекс на несколько разных элементах (а именно на основных элементах контейнера).ключевые биты:

#slideshow {
    position: relative;
}

#slideshow #pictures {
    left: 0;
    z-index: 1;
    position: absolute;
}

#slideshow #menu {
    right: 0;
    position:relative;
    z-index: 3;
}

#slideshow #pictures .subscribe {
    position:absolute;
    bottom: 0;
    z-index: 2;
}

Это примерно то, что вы искали?Дайте нам знать, как вы идете!

Answer 2

Вам нужно использовать position: relative для любого родительского DIV (с изображением в нем).Любые слои для наложения этого DIV должны быть вложены в родительский элемент с атрибутом CSS, равным position: absolute.

. Это позволяет установить вложенный тег DIV в верхнем левом углу его родительского элемента и наложить его.Тогда z-index должен работать.

Надеюсь, это поможет.

Ссылка: http://css -tricks.com / 3118-text-blocks-over-image /

Answer 3

Опубликуйте соответствующий HTML, пожалуйста!

Тем не менее, содержимое блоков, похоже, получает z-индексы, но это часто не работает из-за "контекста стека",См. Перекрытие и ZIndex .

Так что, в зависимости от HTML, вам, вероятно, потребуется установить z-index на #pictures и #menu контейнеры.