Question

是否可以在图像上放置一个复选框而不使用＆＃39; top＆＃39;和＆＃39;职位：绝对＆＃39; ？

<div class="main">
<img src="http://www.standard.co.uk/incoming/article9760552.ece/binary/original/Rooney.jpg" class="image"/>
<input class="checkbox" type="checkbox" value="1" />
</div>

JSFIDDLE

Answer 1

有几种可能的方法。如果您想避免top和absolute，可以使用负边距来定位它。或者，如果您只是想在单击图像时选中复选框，则可以将图像包装在标签中并将标签绑定到复选框。我已经完成了here。

HTML：

<div class="main">
  <label for="checkbox">
    <img src="http://www.standard.co.uk/incoming/article9760552.ece/binary/original/Rooney.jpg" class="image" />
  </label>
  <input id="checkbox" type="checkbox" value="1" />
</div>

CSS：

.image {
  height: 200px;
  width: 250px;
}

input {
  display: block;
  margin-top: -200px;
  position: relative;
}

快速解释：position: relative允许复选框位于图片顶部（z-index不会在此处剪切），否定margin-top将其拉到图像上，并且display: block使得可以应用上边距（我不确定为什么它不适用于内联元素。）我预计也必须在margin-left上使用负边距，但它似乎自然地向左移动了。我也不确定为什么。但它确实有效，并且不需要position: absolute或top。

在图像上放置复选框而不使用＆＃39; top＆＃39;和＆＃39;位置：绝对＆＃39;？

1 个答案: