z-индекс на фиксированном заголовке не работает

Question

Я попытался воспроизвести проблему в этом plunker.

.demo-blog.mdl-layout .mdl-layout__content { 
    padding-top: 0px; 
    position: relative; 
    margin-top: -80px; 
    z-index: 100; 
} 

header.main-header{ 
    z-index: -50; 
} 

Я хочу, чтобы div, который говорит «на дороге снова», находится над заголовком, в котором говорится «обновление эволюции». Я попытался изменить z-index родителя, изменив z-index каждого связанного блока, заголовок заголовка в теге div, и все же ничего не работает. Опция «в дороге снова» все еще находится под заголовком.

Что я хочу, это this.

Большое спасибо.

Answer 1

Используется для z-index с position без position это не работает.

Свойство z-index указывает порядок стека элемента.

Примечание:z-index работает только на расположенных элементов(position:absolute, position:relative, or position:fixed).

Answer 2

Решение этой проблемы необходимо добавить margin-top: -60px; к .demo-blog