Почему при задании общего фона, пропадает фон header?

Question

[Лариса]

Пример проблемы, для визуализации вопроса надо раскомментировать /*background-color: #cccccc;*/

решения по верстке не требуется, хочу понять только почему фон центра закрашивает header

как сделать чтобы фон был прижат кверху я знаю, вопрос чисто по теории css в стиле "какого черта так просиходит"
низ ведь такая участь не постигает

Answer 1

[Ivanq]

Так у Вас main наслаивается на header, а footer на main. footer выше main, а main своим фоном закрашивает header. Без background-color фон прозрачный, и красный томатный заголовок просвечивает. UPD Проще понять, посмотря на пример: https://jsfiddle.net/Ivanq/bhok6cev/3/. Здесь задана прозрачность, и видно, что на что наслаивается.

Пример без ошибки: https://jsfiddle.net/Ivanq/1r69khza/
main просто не наслаивается ни на header, ни на footer.