css: how to position a X sign at the top right corner of the img element

Question

Besides, position: relative, and then set right and bottom position?

I wanna the close sign positioned top right corner whatever the size of the img

Answer 1

You can use absolute position on the X sign and set its position with respect to the relatively positioned parent.

document.querySelector('.close').addEventListener('click', function() {
  console.log('close');
});

.wrapper {
  position: relative;
  display: inline-block;
}
.close:before {
  content: '✕';
}
.close {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

<div class="wrapper">
  <img src="https://www.google.com/images/srpr/logo11w.png" />
  <span class="close"></span>
</div>

Answer 2

Wrap the <img> in another element with position: relative and place the X sign as a sibling to the image. Then give the X sign position: absolute and top and right values of 0 or whatever.

You'll also need to make sure the image is either width: 100% and/or the wrapping element is floated or has display: inline-block.

Example markup:

<div class="parent">
  <img src="image.jpg">
  <button class="close">X</button>
</div>

Example CSS:

.parent {
  position: relative;
  display: inline-block;
}

.close {
  position: absolute;
  top: 0;
  right: 0;
}

Here's a pen of this: http://codepen.io/Mest/pen/FjeuD/