Проблемы с позиционированием текста

[gumuch]

Добрый день. Нуждаюсь в помощи/совете! 
В корне сайта (html) создал блок с позиционированием, написал в нем номер телефона и почту. На большом мониторе блок отображается нормально, а вот если зайти через смартфон то данный блок налазит на картинку и я никак не могу это изменить..., игрался с позиционированием (absolute, fixed, relativ и т.д.) но получаю на выходе либо прикрепленный блок к верхнему левому краю либо он налазит на картинку. Подскажите, что я делаю не так? 
Сам сайт: http://2metra.com/

Вот код который я прописал:

Скрытый текст

 <style>
  .telefon {
  width: auto;
  height: auto;
  position: absolute;
    top: 75px;
  right: 200px;
       z-index: 999999999999999999999999999999;
}
    </style>
     </head>
    <div class="telefon">
      <p><table cellpadding="5">
      <tr>
      <td valign="top"><img src="/images/tel_icon.png"></td>
       <td valign="bottom"><big><big>+38 (098) 496-19-18</big></big></td>
</tr>
        <tr>
      <td valign="top"><img src="/images/mail_icon.png"></td>
       <td valign="bottom"><big><big>office@2metra.com</big></big></td>
       <td></td>
</tr>
      </table></p>
      </div>

 

 

Edited March 21, 2018 by gumuch

[AlexZaw]

absolute

Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

Edited March 21, 2018 by AlexZaw

[gumuch]

3 минуты назад, AlexZaw сказал:

absolute

Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

Спасибо конечно. Но Вы всего лишь скопировали мне текст который я уже читал на сайте http://htmlbook.ru
Если знаете, прошу Вас объяснить мне этот текст своими словами, что бы я понял, что не так. 

[AlexZaw]

Ну да, оттуда и копировал, а что непонятно то?? У вас блоку .telefon задано абсолютное позиционирование, расположен этот блок в body, body это вся страница, вот относительно нее и располагается .telefon, и если вы задали координаты элементу top:100px, то, как вы не изменяйте размер окна браузера, он будет отодвинут от верхнего края страницы на 100px а, все другие элементы ведут себя так, как-будто этого элемента вообще нет. Что у вас и происходит, когда вы заходите с телефона - все элементы выстраиваются так как вы им указали, а .telefon просто располагается поверх них. 

[gumuch]

1 минуту назад, AlexZaw сказал:

Ну да, оттуда и копировал, а что непонятно то?? У вас блоку .telefon задано абсолютное позиционирование, расположен этот блок в body, body это вся страница, вот относительно нее и располагается .telefon, и если вы задали координаты элементу top:100px, то, как вы не изменяйте размер окна браузера, он будет отодвинут от верхнего края страницы на 100px а, все другие элементы ведут себя так, как-будто этого элемента вообще нет. Что у вас и происходит, когда вы заходите с телефона - все элементы выстраиваются так как вы им указали, а .telefon просто располагается поверх них. 

Это я понимаю. Вопрос заключается в том, как исправить ситуацию?

[AlexZaw]

Ну например перенести этот блок в параграф к картинке, убрать у него позиционирование, задать display:inline-block; и

vertical-align:middle;

Более точно уже сами подравняете.

А вообще способов много есть, вопрос в том что вы хотите получить в итоге

Edited March 21, 2018 by AlexZaw

[gumuch]

Спасибо за совет, буду пробовать. 
Хочу, что бы красиво отображалось как на ПК так и на мобильных устройствах

[gladiolus3228]

В 21.03.2018 в 11:41, gumuch сказал:

Спасибо за совет, буду пробовать. 
Хочу, что бы красиво отображалось как на ПК так и на мобильных устройствах

сделай несколько медиа запросов и поставь так как тебе нужно

[gumuch]

В 03.04.2018 в 15:25, gladiolus3228 сказал:

сделай несколько медиа запросов и поставь так как тебе нужно

Что такое медиа запросы?) 

[AlexZaw]

медиа запросы