Как реализовать позиционирование подсказки относительно элементов на картинки с учетом Адаптивности http://prntscr.com/9h3sfw , вот наглядный пример что нужно http://www.gt3themes.com/wordpress-themes/canvas/ Разбирал данный сайт но так и не нашел как так реализовать, точки могут стоять где угодно. Указывать положение точек в процентах не дало нормального результата.
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
-
Да все понимаю, вашь метод с calc не кроссбраузерный, нужно просто проценты, у меня больше проблема была как это сделать автономно чтобы точки пользователь вводил. Суть позиционирования понятна. Все сделал. Спс за ответ 11 мар 2016 в 7:29