3

Есть изображение. Как спозиционировать крестик (Х) в правый верхний угол изображения? Пропорции картинки могут быть разными.

2
  • Какая примерно структура html? Есть ли у картинки "обёртка" в виде блочного элемента? Только CSS или можно ещё JS? 15 авг 2013 в 13:47
  • Обёртка есть блоком div. Можно и JS 15 авг 2013 в 14:04

4 ответа 4

3

Просто через абсолютное позиционирование относительно родителя картинки.

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">&#215;</a>
  <img src="http://elitefon.ru/images/201302/elitefon.ru_32715.jpg" />
</div>

2

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>

1
  • 2
    Брррррр.. Зачем тут скрипт??
    – Qwertiy
    11 янв 2016 в 7:40
0

Вот так

4
  • Пишите более развернутые комментарии. Ссылки могут устареть.
    – korytoff
    11 янв 2016 в 7:11
  • да, и ваш вариант не работает в Сафари на маке – joxi.ru/vAWYJ7YiVlK6mW
    – korytoff
    11 янв 2016 в 7:12
  • В хроме в Windows он тоже не работает...
    – Qwertiy
    11 янв 2016 в 7:41
  • Да и в Linux тоже не работает
    – sercxjo
    11 янв 2016 в 7:44
-1
float:right;
vertical-align:top;
3
  • Т.е. вы предлагаете вы так: <img><div style="float:right; vertical-align:top;">x</div></img> ?!
    – kandi
    15 авг 2013 в 12:48
  • Не совсем. У Вас же картинка то же лежит в чем то? например в <a></a>. Вот и рядом с картинкой вставьте ещё дивчик, а ему эти свойства. Пример <a href=""><img src="" /><div style="float:right; vertical-align:top;">X</div></a>
    – Speller
    15 авг 2013 в 12:52
  • Не сработает же. Точнее, при добавлении отрицательных margin'ов сработать может, но в ответе про это ни слова.
    – Qwertiy
    11 янв 2016 в 7:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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