CSS - z-index не работает должным образом

Question

Я использую z-index на своей странице (ссылка больше не нужна), и она не работает должным образом: она не помещает определенные элементы div выше всех других ...

Вы можете увидеть это сами, щелкнув по одному из пунктов в левой или правой панели. Затем маска исчезнет, ​​но под ней появится окно сообщения. Я много пробовал, но просто не могу отобразить окно сообщения над всеми остальными ...

Что я могу сделать, чтобы это исправить? [примечание: 2-й вопрос ниже!]

Если вы не хотите проверять страницу, окно сообщения находится в некоторых других div:

<div>
 <div>
  <div>message box</div>
 </div>
</div>

Позиционирование CSS выглядит следующим образом:

.window {
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 100;
}

Я использую position: fixed, потому что position: absolute здесь не является абсолютным, div не выровнен по отношению к телу, а как-то еще. Есть ли способ сбросить позиционирование и снова установить абсолютное положение?

Answer 1

Насколько я помню, проблемы z-index часто возникают из-за того, что родители z-indexed элементов не позиционируются. Родители-братья и сестры должны быть расположены.

Answer 2

Если вы используете jquery, отметьте top Z Index Plug-in , вы можете применить его, когда объект имеет событие мыши, например:

<div id="modal" onmouseover="$(this).topZIndex();"></div>

Затем измените положение на абсолютное с помощью jquery или наоборот:

$(document).ready(function(){ $('#modal').css('position','absolute'); });

Answer 3

если вы удалите z-index из #leftbar, это решит вашу проблему. Позиция не должна иметь значения, если она у вас есть.