html - 如何使复选框覆盖方形容器的 100% 宽度和 100% 高度？

Question

我已经能够在动态大小(响应式)div 的顶部放置一个复选框，但现在我需要这样做，以便该复选框覆盖此 div 的 100% 宽度和 100% 高度。

这是我的代码笔:http://codepen.io/PiotrBerebecki/pen/yadEOP目前我只是暂时硬编码了复选框的宽度和高度。

HTML:

<div id="container">
  <input type="checkbox">
  <img src="http://placekitten.com/400/400">
</div>

CSS:

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#container {
  width: 50%;
  border: solid 4px tomato;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

input {
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0.75;
}

Answer 1

首先您需要为复选框创建一个堆叠上下文，然后添加 100% 的宽度和高度。完成。

#container {
/*首先创建堆叠上下文*/
position:relative；
}

输入{
宽度:100%；
高度:100%；
}

完整示例:codepen