html - Div 背景颜色与其他 div 重叠，但内容不重叠

Question

我从来没有见过这个

我正在开发一个基本的博客网站，现在我已经创建了页面，并且正在添加一个 DIV 容器以用于订阅时事通讯。我发现的是，当我检查我的代码时，除了我的时事通讯 div (.newsletter-container) 之外，由于某些奇怪的原因，div 本身将自己置于另一个 div 之上，但是当我输入文本时，文本位于该 div 下方。我对此很困惑，真的不知道如何解释。

我会说自己在附加的代码笔中看一下以理解我的意思。淡黄色是我的实际 div，正如您在分页旁边看到的那样，它显示了该 div 的内容。但是背景颜色和内容都必须放在分页下方

提前致谢，请告诉我我做错了什么，因为我已经有一段时间没有建立网站了。

我的代码:codepen

时事通讯代码:

.newsletter-container {
  position: relative;
  background-color: rgba(252, 250, 238, 1);
  /* padding: 50px 0px; */
  height: 200px;
  color: black;
}

<div class="newsletter-container">CONTENT OF NEWSLETTER</div>

    

Answer 1

在上面的容器(您的分页)中，如果您添加到 .newsletter-container 类，则有很多 float: left 元素:

clear: both; // or left

容器将在下一行。

这是您想要实现的目标吗？