How Can I Bring The Css Resize Icon Above A Child Img Tag?

In my answer to another question I noticed the CSS resize handle icon of a parent div can be obfuscated by an img. In that answer it doesn't really matter, as background is more ap

Solution 1:

At first, I thought about the ::-webkit-resizer pseudo element, but upon further testing, I found out that it only considers textarea elements, not other elements that uses the resize property. Here's a fiddle showing this behavior.

Also, notice that even on the textarea element, ::-webkit-resizer style changes only kick in after it reaches a certain height (Very very small). This is also reproducible through the fiddle above.

Given that, it seems to me that the best alternative to "fix" this bug is to use a custom JS resizer lib.

A (rather monkeypatchey) pure css workaround is to apply a negative z-index to the child img

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

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

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