z указатель фиксированный родитель и ребенок

Question

Я хочу, чтобы gui был поверх плаката. Оба элемента должны иметь фиксированные позиции. Он отлично работает, если я устанавливаю положение gui в абсолютное, но фиксированное не работает.

#gui { 
 
    width: 250px; 
 
    height: 50px; 
 
    position: fixed; // If I change to absolute then it works. 
 
    background-color: green; 
 
} 
 

 
#poster { 
 
    width: 250px; 
 
    height: 250px; 
 
    position: fixed; 
 
    background-color: red; 
 
    z-index: -1; 
 
}

<div id='gui'> 
 
    <div id='poster'></div> 
 
</div>

https://jsfiddle.net/pfpj03f5/

Почему это не работает? Установка z-индекса на положительные числа на #gui тоже не работает.

Answer 1

Поскольку плакат является дочерним элементом gui.

Фиксированная позиция делает их независимыми от родительских элементов в любом случае, так что просто переместить плакат из графического интерфейса, и она работает:

<div id='gui'></div> 
<div id='poster'></div> 

https://jsfiddle.net/eaaz8o2z/