Сохранение div'ов от перекрытия при изменении размера - PullRequest
Новая
       21

Сохранение div'ов от перекрытия при изменении размера

0 голосов
/ 25 июня 2019

У этих div-ов есть изображение с наложенным текстом, которое выглядит так, как я хочу, чтобы оно было в полном размере.

Однако, когда я изменяю размеры до небольшого мобильного размера, текст переходит в верхнюю часть изображения, и элементы div перекрываются.

Как сделать так, чтобы при изменении размера текст переместился в конец изображения, но самое главное, чтобы контейнеры не перекрывались? 

.container {
  position: relative;
  font-family: Arial;
  clear:both;
}

.text-block {
 clear:both;
  position: absolute;
  bottom: 30px;
  right: 10px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  font-family: Arial;
  clear:both;
}

.text-block {
 clear:both;
  position: absolute;
  bottom: 30px;
  right: 10px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}
</style>
</head>
<body>

<h2>Image Text Blocks</h2>
<p>How to place text blocks over an image:</p>

<div class="container">
  <img src="https://via.placeholder.com/250x150" alt="Nature" style="width:90%;">
  <div class="text-block">
    <h4>Nature</h4>
    <p>What a beautiful sunrise</p>
  </div>
  
</div>

<div class="container">
  <img src="https://via.placeholder.com/250x150" alt="Nature" style="width:90%;">
  <div class="text-block">
    <h4>Nature</h4>
    <p>What a beautiful sunrise</p>
  </div>
  
</div>


</body>
</html>

1 Ответ

1 голос
/ 25 июня 2019

Разрешить элементы уровня блока (.text-blocks) складывать, как они, естественно, для небольших областей просмотра.Затем примените абсолютное позиционирование после предпочитаемой точки останова с помощью медиазапроса. 

.container {
  font-family: Arial;
}

.container img {
  display: block;
  width: 100%;
}

.text-block {
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

@media ( min-width: 48em ) {
  .container {
    position: relative;
  }
  
  .container img {
    width: 90%;
  }
  
  .text-block {
    position: absolute;
    bottom: 30px;
    right: 10px;
  }
}
<h2>Image Text Blocks</h2>
<p>How to place text blocks over an image:</p>

<div class="container">
  <img src="https://via.placeholder.com/250x150" alt="Nature">
  <div class="text-block">
    <h4>Nature</h4>
    <p>What a beautiful sunrise</p>
  </div>
  
</div>

<div class="container">
  <img src="https://via.placeholder.com/250x150" alt="Nature">
  <div class="text-block">
    <h4>Nature</h4>
    <p>What a beautiful sunrise</p>
  </div>
  
</div>
...