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 符号作为图像的同级。然后给X标志position: absolute和top和right的值0或什么的。

您还需要确保图像是width: 100%和/或包装元素是floated或具有display: inline-block。

示例标记：

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

示例 CSS：

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

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

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