Search the Community

Доброго времени суток всем! Возникла такая проблема. Создаю форму авторизации в виде модального окна. Хочу сделать так, чтобы когда появлялась форма, то остальной фон затемнялся. Для затемнения использую div-блок с position: fixed; c прозрачностью, меньшей единицы и z-index'ом равным 100. У самого модального окна я поставил z-index: 200, надеясь, что он унаследуется всеми вложенными div-ами, из которых я собирал модальное окно и все они будут лежать "выше" затемнения, значит не будут "затемняться". Но это не помогло. Часть составных блоков формы затемнилась, часть - осталось светлыми. Скриншоты проблемы: http://hipics.ru/image/wjJ-- форма без затемнения http://hipics.ru/image/wjf-- форма с затемнением(затемнение "залазит" один из внутренних блоков формы, что смотрится некрасиво. Код верстки: https://jsfiddle.net/gn1fzktu/1/ Будьте добры, подскажите пожалуйста в чём мои ошибки, наставьте на путь истинный! CSS-код блоков, из которых состоит форма-окно: #div_form {display: none;border-radius: 10px 10px 10px 10px;margin: auto;margin-top: auto;width: 400px;height: 232px;position: fixed;top: 50%;left: 50%; margin-top: -110px; ; box-shadow: 0 0 15px 3px #000; z-index: 200;}#div_header { //border: 1px solid black; height: 20px; border-radius: 10px 10px 0px 0px; background: linear-gradient(to top, #aaa, #fff); padding: 5px; text-align: center; z-index: 200;}#div_body { border: 1px solid black; height: 200px; border-radius: 0px 0px 10px 10px; background: #000; opacity: 0.5; z-index: 200;}#content{ position: relative; top: -190px; left: 10px; z-index: 200;}CSS-код блока для затемнения: #TB_overlay { display: none; //opacity: 0.8; position: fixed; left: 0; right: 0; top: 0; bottom: 0; padding: 16px; background-color: rgba(1, 1, 1, 0.8); z-index: 100; overflow: auto; }