текстовый контейнер с плавающей запятой css и медиа запрос - PullRequest
Новая
       0

текстовый контейнер с плавающей запятой css и медиа запрос

0 голосов
/ 13 сентября 2018

У меня проблема с отображением из двух контейнеров с помощью 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>

1 Ответ

0 голосов
/ 13 сентября 2018

Поместите их оба в относительно позиционированный контейнер, а затем добавьте медиа-запрос, чтобы абсолютно позиционировать текст для больших экранов: 

#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>
...