1

Как реализовать позиционирование подсказки относительно элементов на картинки с учетом Адаптивности http://prntscr.com/9h3sfw , вот наглядный пример что нужно http://www.gt3themes.com/wordpress-themes/canvas/ Разбирал данный сайт но так и не нашел как так реализовать, точки могут стоять где угодно. Указывать положение точек в процентах не дало нормального результата.

1
  • Мне кажется вам надо понять как работает позиционирование position: absolute; и position: relative; И работать с % относительно ширины и высоты изображения. 28 дек 2015 в 2:12

1 ответ 1

1

CSS:

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.container{
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

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

.dot{
  position: absolute;
  height: 10px;
  width: 10px;
  background-color: red;
  cursor: pointer;
}

HTML:

<div class="container">
  <img src="http://s30.postimg.org/b2a7v9z41/kvartira5.gif">
  <div class="dot" style="left: calc(35% - 5px); top: calc(50% - 5px);"></div>
  <div class="dot" style="left: calc(52% - 5px); top: calc(80% - 5px);"></div>
  <div class="dot" style="left: calc(80% - 5px); top: calc(35% - 5px);"></div>
</div>

https://jsfiddle.net/Drabadur/tdfddfhj/1/embedded/result/

Судя по всему, ты не очень хорошо понимаешь принципы позиционирования. Почитай вот это: https://webref.ru/css/position

1
  • Да все понимаю, вашь метод с calc не кроссбраузерный, нужно просто проценты, у меня больше проблема была как это сделать автономно чтобы точки пользователь вводил. Суть позиционирования понятна. Все сделал. Спс за ответ
    – Karalahti
    11 мар 2016 в 7:29

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.