Как сверстать такую структуру?

Question

[Дмитрий Кравченко]

Всем привет!

Что мы имеем: два контейнера, которые лежат на одном уровне. Первый (#interface) содержит некий интерфейс, который должен быть поверх бэкграунда (#sectionBg), который находится во втором блоке (#section). Также там, во втором блоке, есть текст и некоторые элементы управления (#sectionText), т.е. нельзя просто задрать z-index у интерфейса, он будет перекрывать текст и контролы

<div id='interface'></div>
<div id='section'>
  <div id='sectionBg'></div>
  <div id='sectionText'></div>
</div>

Как можно сверстать это без перенесения интерфейса внуть блока-секции?

Спасибо!

Comments

[Павел Воронюк]

"т.е. нельзя просто задрать z-index у интерфейса, он будет перекрывать текст и контролы"
(#sectionText) тоже добавить z-index.

То что вы описали не логично... при такой верстке неполучиться без з-индексов.
тут или менять структуру html или присваивать z-index нужным элементам

[Дмитрий Кравченко]

Павел Воронюк: z-index менять можно, но как именно проставить, чтоб интерфейс вложился между бэкграундом и текстом?

[Павел Воронюк]

Дмитрий Кравченко: ну как то так
codepen.io/anon/pen/EPqORq

вы бы сверстали хоть что нить чтоб было легче ориентироваться. С выше описаного, я понял что это так должно выглядить)

[Дмитрий Кравченко]

Павел Воронюк: спасибо, очень помогли. У меня position: fixed стояло. Как выяснилось, зря

Answer 1

[Григорий]

Почему не задать отступ у #section?

Comments

[Дмитрий Кравченко]

что за отступ?

[Григорий]

Задать высоту inerface и расположить его абсолютно
задать внутренний верхний отступ section равным высоте interface
sectionText разместить также абсолютно в любом месте
sectionBg удалить