z-index в css не работает

Question

Этот div

<div style="position: relative; z-index: 99;">123</div>

показано выше, чем этот

<div style="position: fixed; z-index: 3000;">456</div>

Когда я назначаю z-index: 98 в первом div, все в порядке! Я могу предоставить больше кода, если это необходимо.

Answer 1

z-index ориентируется на своего родителя - они оба в одном родительском элементе? z-index реализует собственный стек - например:

Боксы D, E и F являются потомками из блока C -> Блок F (z-index: -1) перекрывал блок B (z-index: 1), поскольку он является потомком из блока c (этот с z-индексом: 3 над полем b)

<div style="position:absolute; top:100px; left:100px; z-index:2; border:1px solid #888; background:#f88;">
      <b>A:2</b>
    </div>
    
    <div style="position:absolute; top:130px; left:130px; z-index:1; border:1px solid #888; background:#88f;">
      <b>B:1</b>
    </div>
    
    <div style="position:absolute; top:190px; left:270px; width:280px; height:280px; z-index:3;
                border:1px solid #888; background:#eee;">
      <b>C:3</b>
    
      <div style="position:absolute; top:30px; left:-30px; z-index:2; border:1px solid #888; background:#8f8;">
        <b>D:2</b>
      </div>
    
      <div style="position:absolute; top:-30px; left:40px; z-index:3; border:1px solid #888; background:#ff8;">
        <b>E:3</b>
      </div>
    
      <div style="position:absolute; top:60px; left:-60px; z-index:-1; border:1px solid #888; background:#8ff;">
        <b>F:-1</b>
      </div>
    </div>

Answer 2

Я думаю, что проблема может быть в том, что

<div style="position: fixed; z-index: 3000;">456</div>

имеет фиксированную позицию, согласно этому сайту: http://www.kavoir.com/2008/12/css-z-index-doesnt-work.html, z-индексы работают только с относительными или абсолютными позициями, поэтому ваш другой div работает с вашим z-индексом.

Если это не так, я бы сказал, что вы неправильно создали свой HTML.

Надеюсь, вы найдете эту информацию полезной.

Answer 3

На этой скрипке это не так: http://jsfiddle.net/kcgCX/

Я думаю, что в вашем коде должно измениться что-то еще. это.

Answer 4

Подсказка: если у вас есть container маленький (Ej. 100px роста) и у вас children больше (Ej, 200px), даже с хорошо установленным z-index, дети выиграли 'быть полностью видимым, если контейнер имеет свойство overflow: hidden.