如何将CSS调整大小图标置于子级img标记上方？

Question

在我对另一个问题的回答中，我注意到父级div的CSS resize句柄图标可能会被img遮挡。在那个答案中，这并不重要，因为background更合适，可以代替使用。

然而，假设（出于某种奇怪的原因），您想在可调整大小的div内放置一个img，该如何将图标带到它上面呢？

我不确定它是否只是某种视觉错觉，所以我使用了带有白色中心的色轮来测试它：

div{
  resize:both;
  overflow:hidden;
  height:400px;
  width:400px;
  border: 1px solid black;
}

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/32/RGB_color_wheel_72.svg"/>
</div>

这里是浏览器比较：

Edge和IE 不支持 CSS resize，因此无法进行测试。我相信Opera使用与Chrome相同的引擎，所以它们都失败了也就不足为奇了。然而，在Firefox中它的工作方式符合预期。Blink有解决方法吗？

- jaunt

---

这实际上非常奇怪...考虑过::-webkit-resizer伪元素，但是正如这个fiddle所示，它只适用于textarea元素，而不适用于具有resize属性的普通元素。此外，似乎存在一个奇怪的bug，即只有当textarea达到特定高度时，对::webkit-resizer伪元素进行的所有更改才会生效。 - Alexandre Wiechers Vaz

考虑到跨浏览器实现（如果这是一个问题的话，因为 FF 似乎没有这个 bug），通过JS或者对 img 应用 position:relative 和 z-index:-1 是让图标位于子 img 前面的唯一方法（参见示例和测试）。（我不想将此转化为答案，因为它对我来说似乎太搞破解了。） - Alexandre Wiechers Vaz

哇，太奇怪了。虽然不是理想的解决方案，但它仍然是一个解决方案 - 我会将其添加为答案，以便每个人都知道已经考虑过了 :) - jaunt

是的，你说得对，这对于可能遇到这个问题的任何人都很有帮助，我会在一分钟内完成它。 - Alexandre Wiechers Vaz

Answer 1

起初，我考虑使用::-webkit-resizer伪元素，但在进一步测试后，我发现它仅考虑textarea元素，而不是使用resize属性的其他元素。这里有一个fiddle展示了这种行为。

此外，请注意，即使在textarea元素上，::-webkit-resizer样式的更改也只会在达到一定高度（非常非常小）后才生效。这也可以通过上面的fiddle进行重现。

鉴于此，对于“修复”此错误，我认为最好的选择是使用自定义JS resizer lib。

一个（相当猴子补丁式的）纯CSS解决方法是将负z-index应用于子级img。

div{
  resize:both;
  overflow:hidden;
  height:400px;
  width:400px;
  border: 1px solid black;
}

img {
  position: relative;
  z-index: -1;
}

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/32/RGB_color_wheel_72.svg"/>
</div>

- Alexandre Wiechers Vaz