带有 CSS 和媒体查询的浮动文本容器答案

【问题标题】：float text container with css and media query带有 CSS 和媒体查询的浮动文本容器
【发布时间】：2019-02-18 01:27:32
【问题描述】：

我在使用 css 从两个容器中显示时遇到问题。第一个容器有一个背景图像。第二个容器仅是文本。

第二个容器的位置在第一个容器的顶部。但是通过在小型媒体查询中显示，我会在第一个容器之后显示第二个容器。

#back,
#back1 {
  width: 100%;
  height: 50px;
  background-color: red;
}

<html>
<body>

<div id="back">
  <div id="text">
    Hello
  </div>
</div>

<hr />

<div id="back1"></div>

<div id="text">
    Hello
 </div>

</body>
</html>

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

标签： css media-queries

【解决方案1】：

将它们都放在一个相对定位的容器中，然后添加一个媒体查询来绝对定位大屏幕的文本：

#back {
  width: 100%;
  height: 50px;
  background-color: red;
}

#container {
  position: relative;
}

@media screen and (min-width: 768px) {
  #text {
    position: absolute;
    top: 0;
  }
}

<div id="container">
  <div id="back"></div>
  <div id="text">
    Hello
  </div>
</div>

【讨论】：