Как наложить относительный позиционированный div с цветом фона

Question

При работе над проектом я заметил некоторое поведение, которое меня смутило. Я добавлял всплывающее окно, которое выделяет фон, используя jQuery fadeIn(), чтобы наложить div с серым прозрачным цветом фона (довольно уверен, что вы знаете, что я описываю). Я заметил, что div накладывал всю страницу, кроме div, который с относительно позиционированным AND имел фоновый цвет. Это было похоже на то, что этот див отдыхал на вершине div, который я назвал fadeIn().

Это простой пример элемента, который не будет наложен:

#container { 
    position:relative; 
    background: white; 
    border: .1em solid black 
} 

Here is a jsfiddle с простым примером того, что я говорю.

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

Answer 1

Вам необходимо использовать z-index, чтобы наложить на любой позиционированный элемент.

Измененное CSS:

#block { 
    background: #000; 
    opacity:0.6; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top:0; 
    left:0; 
    display:none; 
    z-index: 100; 
} 

Наконец, здесь скрипку: Demo

Вот некоторая информация о z-index

Answer 2

попробовать, чтобы дать накладываемого DIV высокоинтенсивного г-индекс, потому что если у обоих есть position:relative z-index может исправить ваш птоблем.

Answer 3

Речь идет об элементе #container - #block, так что над ним надлежит. Вы можете просто установить CSS z-index, и это так.

#block { 
    background: #000; 
    opacity:0.6; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top:0; 
    left:0; 
    display:none; 
    z-index: 10; 
} 

demo