I've been able to place a checkbox on top of a dynamically sized (responsive) div but now I need to make it so that the checkbox covers 100% width and 100% height of this div.
Here is my codepen: http://codepen.io/PiotrBerebecki/pen/yadEOP where at the moment I just temporarily hardcoded the width and the height of the checkbox.
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;
}
First you need create a stacking context for the checkbox, then you add width and height of 100%. Done.
#container {
/*create stacking context first*/
position: relative;
}
input {
width: 100%;
height: 100%;
}
Full example: codepen