Позицианирование div с текстом.

[BSI]

Всем привет и с наступающим НГ. Проблема состоит в том, что не получается зафиксировать div с текстом. Есть несколько картинок и текст. Так вот при изменении размеров окна браузера картинки остаются на своих местах, а div с текстом сдвигается и сам текст масштабируется. Пересмотрел в интернете кучу примеров, но так и не нашел решение. Ссылка для просмотра https://codepen.io/bsi_52/pen/PoGENWY

Вот сам код:

<div id="container">

<div class="dom"><img src="Дом.png"></div>

<div class="byk"><img src="Бык.gif" alt=""></div>

<div class="snegovik"><img src="Снеговик.gif"></div>

<div id="test">
Двадцать первый – год Быка<br>
Крысе он намнёт бока<br>
Високосный год заменит<br>
Эпидемии отменит !<br>
С облегчением вздохнём<br>
С Бычком прекрасно заживем !!!<br>
</div>
</div>

#container {
  padding: 10px 30px;
  width: 100%;
  margin: 0 auto;
  max-width: 880px;
position: relative;
}


.dom {
margin-left: 0;
margin-top: 2em;
position: absolute;
z-index: 3;
  }

.byk {
margin-left: -2em;
margin-top: 20em;
transform: scale(0.5);
position: absolute;
z-index: 5;             
  }

.snegovik {
margin-left: 35em;
margin-top: 7em; 
transform: scale(0.2);        
position: absolute;
z-index: 8;
  }

#test{ 
width: 28vw;
height: 15vw;
top: 4em;
left: 3em;
position: absolute;
z-index: 8;

text-align: center;
  color: white;
  font:  500 30px/1.5 'Syncopate', sans-serif;
  font-style: italic;

  text-shadow: 
	0 1px 0 #ccc, 
        0 2px 0 #c9c9c9,
        0 3px 0 #bbb,
        0 4px 0 #b9b9b9,
        0 5px 0 #aaa,
        0 6px 1px   rgba(0,0,0, 0.10),
        0 0px 5px   rgba(0,0,0, 0.10),
        0 1px 3px   rgba(0,0,0, 0.30),
        0 3px 5px   rgba(0,0,0, 0.20),
        0 5px 10px  rgba(0,0,0, 0.25),
        0 10px 10px rgba(0,0,0, 0.20),
        0 20px 20px rgba(0,0,0, 0.15);
 text-transform: uppercase;
 font-size: 1.5vw; }

Файл вложен. Прошу спецов помочь. Всем спасибо.

[рони]

а div с текстом сдвигается и сам текст масштабируется.

так установите фиксированные размеры

#test {
      width: 350px;
      height: 100px;
      top: 20px;
      left: 35px;
      position: absolute;
      z-index: 8;
      text-align: center;
      color: white;
      font: 500 14px/1.5 'Syncopate', sans-serif;
      font-style: italic;
      text-shadow: 0 1px 0 #ccc,
      0 2px 0 #c9c9c9,
      0 3px 0 #bbb,
      0 4px 0 #b9b9b9,
      0 5px 0 #aaa,
      0 6px 1px   rgba(0,0,0, .10),
      0 0 5px   rgba(0,0,0, .10),
      0 1px 3px   rgba(0,0,0, .30),
      0 3px 5px   rgba(0,0,0, .20),
      0 5px 10px  rgba(0,0,0, .25),
      0 10px 10px rgba(0,0,0, .20),
      0 20px 20px rgba(0,0,0, .15);
      text-transform: uppercase;
  }

[BSI]

Вот спасибо ДОБРЫЙ ЧЕЛОВЕК ! А то я устал искать ответ на эту проблему. Я пока мало соображаю в этих делах.

[BSI]

Рано я порадовался. В том первом варианте я не всё, что имеется в HTML и CSS, вставил. В первом варианте в роде всё работает как надо, но когда я вставил #test в общий, так скажем проект открытки, то текст масштабироваться перестал, но сдвигается при изменении окна браузера. Наверное, что-то ещё надо менять. Приложил файл со всеми объектами. Взгляните спецы. Всем спасибо.

[BSI]

Тему можно закрыть. Решение найдено.

[рони]

Решение найдено.