Есть изображение. Как спозиционировать крестик (Х) в правый верхний угол изображения? Пропорции картинки могут быть разными.
4 ответа
Просто через абсолютное позиционирование относительно родителя картинки.
img {
width: 100%;
}
.img-wrapper {
width: 400px;
position: relative;
}
.img-wrapper .close-link {
position: absolute;
top: 10px;
right: 10px;
padding: 3px 5px;
background: rgba(255,255,255,.5);
color: rgba(0,0,0,.5);
text-decoration: none;
border-radius: 5px;
}
.img-wrapper .close-link:hover {
background: rgba(255,255,255,.85);
color: rgba(0,0,0,.85);
}
<div class="img-wrapper">
<a href="#" class="close-link">×</a>
<img src="http://elitefon.ru/images/201302/elitefon.ru_32715.jpg" />
</div>
for(var i=0; i < document.getElementsByClassName('image').length; i++)
{
document.getElementsByClassName('del')[i].style.marginLeft = document.getElementsByClassName('image')[i].offsetWidth-16 + 'px';
}
<span class="image">
<a class="del" href="" style="position: absolute;">x</a>
<img src="" width="80" height="80" alt="" />
</span>
<span class="image">
<a class="del" href="" style="position: absolute;">x</a>
<img src="" width="80" height="80" alt="" />
</span>
<span class="image">
<a class="del" href="" style="position: absolute;">x</a>
<img src="" width="80" height="80" alt="" />
</span>
-
2
4
-
-
да, и ваш вариант не работает в Сафари на маке – joxi.ru/vAWYJ7YiVlK6mW– korytoff11 янв 2016 в 7:12
-
-
float:right;
vertical-align:top;
-
Т.е. вы предлагаете вы так: <img><div style="float:right; vertical-align:top;">x</div></img> ?!– kandi15 авг 2013 в 12:48
-
Не совсем. У Вас же картинка то же лежит в чем то? например в <a></a>. Вот и рядом с картинкой вставьте ещё дивчик, а ему эти свойства. Пример <a href=""><img src="" /><div style="float:right; vertical-align:top;">X</div></a>– Speller15 авг 2013 в 12:52
-
Не сработает же. Точнее, при добавлении отрицательных margin'ов сработать может, но в ответе про это ни слова.– Qwertiy ♦11 янв 2016 в 7:39