Question

我已经能够在动态大小（响应）div的顶部放置一个复选框，但现在我需要将其设置为使得该复选框覆盖此div的100％宽度和100％高度。

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

HTML：

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;
}

CSS：

{{1}}

Answer 1

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

#container { /*create stacking context first*/ position: relative; }

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

完整示例：codepen

Answer 2

父级div：

.checkboxes {
    position: relative;
}

其中的输入

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

这样，您可以隐藏复选框，使其采用父级的宽度和高度，并使用不透明度值将其隐藏（重要-显示：无，可见性：隐藏将不起作用）并使其可单击。瞧：）

如何使复选框覆盖sqaure容器的100％宽度和100％高度？

2 个答案: