Как создать эффект наложения с помощью CSS

Есть несколько способов создания наложений. В этой статье мы покажем, как создать наложение с помощью CSS свойств.

Один из способов создания такого эффекта является абсолютное позиционирование HTML элемента на странице. Необходимо в разметке создать div, потом абсолютно позиционировать его с помощью свойства position, и дальше с помощью свойства z-index задать для div высокий z-index, чтобы он находился поверх всех остальных элементов страницы. Мы зададим более высокий z-index для следующего элемента div, которое откроется сверху наложения.

  • Создайте два элемента div с классами "overlay" и "modal".
  • Добавьте стиль к классу "overlay".

Для position задайте значение absolute, а z-index установите в 10.

<div class="overlay"></div>
<div class="modal"></div>
.overlay{
position: absolute; 
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
  • Добавьте стиль к "modal".

Здесь мы устанавливаем свойство position в fixed а z-index в 11, на 1px выше, чем слой наложения.

.modal {
width: 300px;
height: 200px;
line-height: 200px;
position: fixed;
top: 40%; 
left: 50%;
margin-top: -100px;
margin-left: -150px;
background-color: #8ebf42;
border-radius: 40px;
text-align: center;
z-index: 11; 
}
  • Also, set style the body.

Мы устанавливаем position в значение relative.

body{
position: relative;
padding: 20px;
margin:0;
min-height:100%;
font-family: 'Open Sans', sans-serif;
background: #8ebf42;
color: #eeeeee;
}

И так, мы создали наложение. Давайте посмотрим результат!

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>overlay div</title>
    <style> 
      body{
      position: relative;
      padding: 20px;
      margin:0;
      min-height:100%;
      font-family: 'Open Sans', sans-serif;
      background: #8ebf42;
      color: #eeeeee;
      }
      .overlay {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 10;
      background-color: rgba(0,0,0,0.6);
      }
      .modal {
      width: 300px;
      height: 200px;
      line-height: 200px;
      position: fixed;
      top: 40%; 
      left: 50%;
      margin-top: -100px;
      margin-left: -150px;
      background-color: #8ebf42;
      border-radius: 40px;
      text-align: center;
      z-index: 11; 
      }
    </style>
  </head>
  <body>
    <h2>Создание наложения с абсолютно позиционированным элементом</h2>
    <div class="overlay"></div>
    <div class="modal">Lorem Ipsum - это текст-"рыба" </div>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </div>
  </body>
</html>

Мы также можем создать наложение при помощи селекторов ::before и ::after.

Стили и решения этого метода во многом похожи на предыдущий. Только здесь необходимо добавить стиль к псевдоклассам ::before и ::after.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>overlay div</title>
    <style> 
      body{
      position: relative;
      padding: 20px;
      margin:0;
      min-height:100%;
      font-family: 'Open Sans', sans-serif;
      background: #8ebf42;
      color: #eeeeee;
      }
      body :after {
      content: "";
      display: block;
      position: fixed; 
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 10;
      background-color: rgba(0,0,0,0.3);
      }
      .modal {
      width: 300px;
      height: 200px;
      line-height: 200px;
      position: fixed;
      top: 40%; 
      left: 50%;
      margin-top: -100px;
      margin-left: -150px;
      background-color: #8ebf42;
      border-radius: 40px;
      text-align: center;
      z-index: 11; 
      }
    </style>
  </head>
  <body>
    <h2>Создание наложения с абсолютно позиционированным элементом</h2>
    <div class="modal">Lorem Ipsum - это текст-"рыба"</div>
    <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </div>
  </body>
</html>
Но использование псевдокласса не поддерживается в Safari и Safari Mobile.