Позиционирование элемента CSS

#позиционирование #css

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

Ответы

Ответ 1

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



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);
}

  ×
  



Ответ 2

for(var i=0; i < document.getElementsByClassName('image').length; i++)
{
    document.getElementsByClassName('del')[i].style.marginLeft = document.getElementsByClassName('image')[i].offsetWidth-16
+ 'px';
}

    x
    



    x
    



    x
    



Ответ 3

Вот так


Ответ 4

float:right;
vertical-align:top;