Слоистые штабелированные позиционированные абсолютные элементы

Question

Я пытаюсь создать Quora/Facebook как макет чата, где высота системы обмена сообщениями составляет 100% и охватывает всю страницу. Но здесь у меня есть пример кода, и я не понимаю, почему верхняя часть не отображается, даже если индекс z больше.

В основном верхняя часть pm-top не отображается. Это проблема, которую я не мог решить.

HTML код:

<div class="pm-container"> 
    <div class="pm-top">pm-top</div> 
    <div class="pm-left">pm-left</div> 
    <div class="pm-right">pm-right</div> 
</div> 

код CSS:

.pm-container { 
    position: relative; 
    background: yellow; 
    height: 100%; 
} 

.pm-top { 
    position: absolute; 
    height: 45px; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    background: blue; 
    z-index: 6px; 
} 

.pm-left, 
.pm-right { 
    position: absolute; 
    height: 100%; 
    top: 0px; 
    padding-top: 45px; 
    z-index: 5px; 
} 

.pm-left { 
    left: 0px; 
    width: 35%; 
    border-right: 1px solid #ddd; 
    background: green; 
} 

.pm-right { 
    left: 35%; 
    width: 65%; 
    background: gray; 
} 

Я воспроизвел этот вопрос здесь.

https://jsfiddle.net/gLr4r4em/

Помощь будет весьма признателен!

Answer 1

https://jsfiddle.net/gLr4r4em/1/

z-index: 6; 

вы не можете использовать точек на Z-индекс это должно быть целым числом :) отметьте, пожалуйста, как ответ, если это так, спасибо.

Answer 2

Навинтите его. если люди сбрасываются, чтобы попытаться помочь им понять это.