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

the image is overflowing (add max-width:100%) – Temani Afif Jun 25 '19 at 21:46 — Temani Afif, Jun 25 '19 at 21:46

Matthew Coloe · Accepted Answer · 2019-06-25T21:53:25.917

5

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>

edited Jun 25 '19 at 21:53

answered Jun 25 '19 at 21:47

Matthew Coloe

102
3

accepted answer gave points, feel free to thumbs up question also, tahnks – Jun 25 '19 at 23:08

score 0 · Answer 2 · edited Jun 26 '19 at 13:32

0

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

edited Jun 26 '19 at 13:32

Vahid Farahmandian

6,081
7
42
62

answered Jun 26 '19 at 06:18

Talha Abbas

11
1

Please add some text to your answer and describe it, please – Vahid Farahmandian Jun 26 '19 at 07:44
parent container does'nt need any width.. because your img width is equal to 500px. so container can adjust a width automatically.. – Talha Abbas Jun 26 '19 at 12:07
welcome to stackoverflow. Would you please add your description in the answer's body? I will do this for you this time;-). Thank you – Vahid Farahmandian Jun 26 '19 at 13:32

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

2 Answers2