Z-индекс в css не работает

этот div

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

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

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

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

7
css z-index

4 ответов

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

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

5

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

коробка D, E и F являются потомками коробки C - > коробка F (z-index: -1) наложила коробку B (z-index:1), потому что это потомок коробки c (это с z-index: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>
27

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

<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 правильно.

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

8

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

2