css - 在绝对定位图像的右上角放置一个图标

Question

我看到很多类似的问题和答案，但没有什么与我想要实现的相同。

这是我的 HTML:

<div class="container">
  <div class="inner">

    <div class="image-container">
      <img src="http://fpoimg.com/600x300" alt=""/>
      <a href="" class="close-link">x</a>
    </div>

    <div>image name</div>
    <div>id: 123456</div>
</div>

和 CSS:

  * {
    font-family: sans-serif;
  }
  .container {
    position: relative;
    border: 1px solid;
    width: 500px;
    height: 500px;

  }

  img {
    max-height: 100%;
      max-width: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
  }

  .close-btn {
    position: absolute;
    background: red;
    padding: 4px 8px;
    border-radius: 50%;
    color:white;
    text-decoration: none;
  }

在这里查看 jsfiddle - https://jsfiddle.net/61afw70q/10/

我需要做的是将红色十字按钮放在图像的右上角。注意 - 我不想将它放在容器的右上角。我想要它的形象。每个图像的大小都会不同。图像在容器内居中。

这是我整个页面的高度精简版。

Answer 1

您实际上并不需要 inner div...您将图像放在容器中，因此也不需要定位图像。

* {
  font-family: sans-serif;
}
.container {
  position: relative;
  border: 1px solid;
  width: 500px;
  display: flex;
  padding: 15px;
  flex-direction: column;
}
.image-container {
  position: relative;
  display: inline-block;
}
img {
  max-height: 100%;
  width: 100%;
}
.close-btn {
  position: absolute;
  background: red;
  top: 4px;
  right: 4px;
  padding: 4px 8px;
  border-radius: 50%;
  color: white;
  text-decoration: none;
}
a.close-link {
  position: absolute;
  background: red;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  line-height: 1.5em;
  border-radius: 50%;
  color: white;
  text-decoration: none;
  top: 4px;
  right: 4px;
}

<div class="container">

  <div class="image-container">
    <img src="http://fpoimg.com/600x300" alt="" />
    <a href="" class="close-link">x</a>
  </div>


  <div>image name</div>
  <div>id: 123456</div>
</div>