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

Question

我已经能够在动态大小（响应式）的顶部放置一个复选框 div 但现在我需要这样做，以便复选框覆盖此 [ 的 100% 宽度和 100% 高度=27=].

这是我的代码笔：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 { /*create stacking context first*/ position: relative; }

input { width: 100%; height: 100%; }

完整示例：codepen

Answer 2

parent div:

.checkboxes {
    position: relative;
}

里面的输入：

.checkboxes .checks {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    cursor: pointer;
    opacity: 0 !important;
}

这样你就可以隐藏复选框，使其采用 parent 的宽度和高度，使用不透明度值将其隐藏（重要 - 显示：none 和可见性：隐藏不会完成工作）并使其可点击。瞧:)

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

How to make the checkbox to cover 100% width and 100% height of a sqaure container?

html

css

checkbox

layout

position