HTML 和 CSS：将复选框放置在图像的右上角

Question

如何将复选框嵌入到图像的右上角？目前这不起作用

.container {
  position: relative;
  width: 100px;
  height: 100px;
  float: left;
  margin-left: 10px;
}

.checkbox {
  position: absolute;
  right: 5px;
  top: 5px;
}

<div class="container">
  <img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
  <input type="checkbox" class="checkbox" id="check1" />
</div>

首先研究了这个：

将图像放置在右上角 - CSS

Answer 1

将 width 属性更改.container为auto。

.container {
  position: relative;
  width: auto;
  height: 100px;
  float: left;
  margin-left: 10px;
}

.checkbox {
  position: absolute;
  right: 5px;
  top: 5px;
}

    <div class="container">
        <img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
        <input type="checkbox" class="checkbox" id="check1" />
    </div>