высота заголовка без учета абсолютного позиционирования

Question

У меня были проблемы с высотой заголовка на сайте для универа.

Я хочу добиться заголовка, который содержит навигацию, ползунок фонового изображения (ширина которого 100%) и речевой пузырь с содержимым сайта под заголовком.

На данный момент у меня все работает так, как должно быть, но высота заголовка не учитывает ползунок фонового изображения, причина в том, что его (фон-ползунок) нужно было расположить абсолютно. В текущем состоянии сайта я добавил высоту заголовка в em, что дает мне необходимый интервал на моем ноутбуке, но при переходе к большему разрешению высота недостаточна, и содержимое сайта попадает в изображение.

У меня вопрос, есть ли способ сохранить текущий макет, но включая функциональность регулируемой высоты жатки?

Текущий сайт: http://beta.immbudden.com

Если вы просматриваете на экране размером больше 1366 x 768, вы поймете, что я имею в виду.

Любая помощь будет очень признательна, большое спасибо заранее!

Answer 1

Мне действительно удалось это исправить самостоятельно. Я поместил абсолютную навигацию, абсолютную речь и относительный слайдер фона. Затем я дал каждый соответствующий z-индекс. Мне также пришлось изменить порядок, в котором каждый вызывался в html, чтобы ползунок не вызывался первым, а последним.

Надеюсь, что это поможет кому-то еще, и, если вам нужно это объяснить, лучше просто прокомментировать здесь :)

Answer 2

Почему бы просто не установить высоту заголовка в пикселях?Если у вас есть заданная высота навигации и ползунок изображения, вы можете просто установить его.

Answer 3

Добавьте bottom-margin к заголовку, равному высоте абсолютно позиционированной навигации.