Как сделать div перед другим?

Обратитесь к приведенным ниже кодам:

<ul>
 <li style="height:100px; overflow:hidden;">
  <div style="height:500px; background-color:black;">
  </div>
 </li>
</ul>

Из приведенных выше кодов мы знаем, что мы можем видеть только 100px высоту черного фона. Мой вопрос: как мы можем видеть 500px высоту <div> черного фона? Другими словами, как я могу сделать <div> перед <li>?

Ответ 1

Используйте свойство CSS z-index. Элементы с большим значением z-индекса располагаются перед элементами с меньшими значениями z-индекса.

Обратите внимание, что для этого вам также необходимо установить стиль position (position:absolute, position:relative или position:fixed) для обоих/всех элементов, которые вы хотите заказать.

Ответ 2

Черная div отобразит полный 500px, если только overflow:hidden не установлен на 100px li

Ответ 3

Вы можете установить z-index в css

<div style="z-index: -1"></div>

Ответ 4

Я думаю, что вам что-то не хватает.

http://jsfiddle.net/ZNtKj/

<ul>
 <li style="height:100px;overflow:hidden;">
  <div style="height:500px; background-color:black;">
  </div>
 </li>
</ul>
<ul>
 <li style="height:100px;">
  <div style="height:500px; background-color:red;">
  </div>
 </li>
</ul>

В FF4 это отображает черную полосу 100px, а затем красный блок размером 500 пикселей.

Немного другой пример:

http://jsfiddle.net/ZNtKj/1/

<ul>
 <li style="height:100px;overflow:hidden;">
  <div style="height:500px; background-color:black;">
  </div>
 </li>
</ul>
<ul>
 <li style="height:100px;">
  <div style="height:500px; background-color:red;">
  </div>
 </li>
 <li style="height:100px;overflow:hidden;">
  <div style="height:500px; background-color:blue;">
  </div>
 </li>
 <li style="height:100px;overflow:hidden;">
  <div style="height:500px; background-color:green;">
  </div>
 </li>
</ul>

Ответ 5

Верхний div использует более высокий z-индекс и нижний div использует нижний z-индекс, затем использует абсолютное зелье