Как поместить текстовый элемент ниже абсолютного div?

Question

(отредактировано) Ширина моего тела - 1080px, но я пытаюсь сделать div, который занимает 100% ширину области просмотра, которая больше ширины тела, для этого я должен использовать position: absolute; на нем. Но теперь я пытаюсь поместить строку текста ниже этого абсолютного div, но что бы я ни делал, это будет продолжаться, я пробовал много способов, но я не мог это исправить, пожалуйста, помогите. Вот мой код:

body {
  width: 1080px;
}

.div {
  background: #f5f5f4;
  position: absolute;
  left: 0;
  right: 0;
  margin: 50px 0;
  height: 500px;
}

.text {
  display: block;
  margin: 20px;
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  color: #666;
}

<div class="div"></div>
<p>text</p>

Заранее спасибо.

Answer 1

body {
  width: 1080px;
}

.div {
  background: #f5f5f4;
  position: relative;
  left: 0;
  right: 0;
  margin: 50px 0;
  height: 500px;
}

.text {
  display: block;
  margin: 20px;
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  color: #666;
}

<div class="div"></div>
<p>text</p>

Answer 2

(РЕДАКТИРОВАНИЕ) На самом деле, я думаю, что теперь я знаю, что вы имеете в виду, хотите ли вы, чтобы ширина была width: 100vw (100 от ширины области просмотра), и сделайте тело overflow-x: visible, если вы хотите, чтобы div был больше чем ширина тела

body {
  width: 1080px;
  overflow-x: visible
}

.div {
  background: #f5f5f4;
  position: relative;
  margin: 50px 0;
  height: 500px;
  width: 100vw;
}

.text {
  display: block;
  margin: 20px;
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  color: #666;
}

<div class="div"></div>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>

Удачного кодирования!

Answer 3

В текстовом классе добавьте следующее css

    position: relative;
    top: 600px;

или хотите что-то еще?