Разместить слой, после слоя с position: absolute

#html #css

Здравствуйте, вот задача: После слоя с position: absolute; нужно разместить следующий
слой, так, чтобы он стоял после предыдущего.

Пример кода:



.full-screen {
    position: absolute;
    width: 100%;
    height: 100%;
}

    

    

        




Цель: первый слой должен быть на весь экран, а второй должен идти после него. Эту
задачу можно решить несколькими способами.
    

Ответы

Ответ 1

Если блок должен скроллиться



html, body {
  height: 100%;
  margin: 0;
}

.full-screen {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: silver;
  opacity: .5;
}

body:before {
  content: "";
  display: block;
  height: 100%;
}

Тут какой-то контент


Ответ 2

Если блок должен быть оверлеем, а НЕ скроллиться



html, body, section {
  height: 100%;
  margin: 0;
}

.full-screen {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: silver;
  opacity: .5;
  pointer-events: none;
}

section {
  overflow: auto;
}

section:before {
  content: "";
  display: block;
  height: 100%;
}

  

  
Тут какой-то контент