CODEWITHSUNDEEP
htmlcsscheckbox
user11690110
user11690110

Reputation:

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

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

Upvotes: 2

Views: 2783

Answers (2)

Talha Abbas
Talha Abbas

Reputation: 21

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

Upvotes: 0

Matthew Coloe
Matthew Coloe

Reputation: 102

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>

Upvotes: 5

Related Questions