HTML and CSS: Place Checkbox in Top Right of an Image

Question

How do I place a checkbox embedded in the upper right of an image? This currently does not work

 .container { position: relative; width: 100px; height: 100px; float: left; margin-left: 10px; } .checkbox { position: absolute; right: 5px; top: 5px; }

 <div class="container"> <img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" /> <input type="checkbox" class="checkbox" id="check1" /> </div>

Researched this first:

Placing an image to the top right corner - CSS

Answer 1

Change the width property of .container to auto .

 .container { position: relative; width: auto; height: 100px; float: left; margin-left: 10px; } .checkbox { position: absolute; right: 5px; top: 5px; }

 <div class="container"> <img src="https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" /> <input type="checkbox" class="checkbox" id="check1" /> </div>

Answer 2

parent container doesn't need any width. because your img width is equal to 500px . so container can adjust a width automatically

.container {
    position: relative;
    width: auto;
    height: 100px;
    float: left;
    margin-left: 10px;
}