如何在绝对div下方放置文本元素？

友喜

（已编辑）我的身体的宽度为1080px，但是我正在尝试制作一个div，该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>

提前致谢。

托比56

（编辑）实际上，我想我现在想知道你的意思，是否要使宽度为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>

祝您编码愉快！

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。