Наложение не влияет на все области страницы

Я пытаюсь применить наложение для создания эффекта, аналогичного https://fancy.com при щелчке по ссылке входа или регистрации, т.е. фон должен быть затемнен.Наложение не влияет на все области страницы

Проблема в том, что моя панель навигации и окна содержимого по какой-либо причине не подвергаются наложению, но не уверены, почему?

Я создал скрипку, чтобы объяснить: https://jsfiddle.net/p861yfLp/1/

Мой код:

<body> 
    <div class="overlay"> 
    <nav> 
     Menu 
    </nav> 
    <div id="content"> 
     <div class="box"> 
     Box 
     </div> 
    </div> 
    </div> 
</body>

источник

2016-06-09 tommyd456

Все содержание находится внутри накладки .. https://jsfiddle.net/p861yfLp/2/ – DaniP

Изменить эти файлы

CSS - установить позицию абсолютного

.overlay { 
     position: absolute; 
}

EDIT: После @Dan iP ответ на изменения в css не требуется, если вы хотите «модальное» чувство для наложения. Если вы хотите наложить все, что я бы рекомендовал, используя абсолютную позицию.

HTML - нет необходимости, чтобы сделать вашу накладку содержать все другой HTML

<body> 
    <div class="overlay"></div> 
    <nav> 
     Menu 
    </nav> 
    <div id="content"> 
     <div class="box"> 
      Box 
     </div> 
    </div> 
</body>

Теперь накладываемый будет 'наложение'.

источник

2016-06-09 14:17:35

Это лучше использовать для фиксированной " модальные "цели ... – DaniP

Я действительно намереваюсь использовать модальный – tommyd456

DaniP прав, @ tommyd456 просто не обертывают« наложение »содержимым, как я сказал в своем ответе;) – dippas

На самом деле применяется наполовину черный цвет фона, но навигация (как дочерний элемент) имеет свой собственный фоновый цвет (#FFF). Если вы удалите свой цвет фона, он работает:

.nav { 
    background-color: transparent; 
}

https://jsfiddle.net/rw60gzbz/

источник

2016-06-09 14:19:53 MattDiMu

Наложение не влияет на все области страницы

ответ

Смежные вопросы