sqaureコンテナの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 { /*create stacking context first*/ position: relative; }

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

全例：codepen