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

问题描述

此外，位置：相对，然后设置右和底位置？

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

我想要任何大小的img的右上角的关闭标志

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

推荐答案

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

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>

这篇关于css：如何在img元素的右上角定位一个X符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！