css：如何在img元素的右上角放置一个X符号

Question

此外，位置：相对，然后设置右下角位置？

无论img的大小如何，我都希望右上角的标志位于右上角

Answer 1

您可以在X符号上使用绝对位置，并相对于相对定位的父级设置其位置。

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

用<img>将position: relative包裹在另一个元素中，并将X符号作为兄弟放置到图像中。然后给出position: absolute的{​​{1}}和top以及right值或其他值。

您还需要确保图片为0和/或包装元素为width: 100%或floated。

示例标记：

display: inline-block

CSS示例：

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

这里有一支笔：http://codepen.io/Mest/pen/FjeuD/