CSS调整句柄“z-index”答案

【问题标题】：CSS resize handle "z-index"CSS调整句柄“z-index”
【发布时间】：2013-12-02 09:39:14
【问题描述】：

我正在尝试使用 CSS resize 制作可调整大小的画布元素。设置如下所示：

HTML：

<div class="canvas-wrapper">
  <canvas></canvas>
</div>

CSS：

.canvas-wrapper {
  position: relative;
  overflow: hidden;
  resize: horizontal;
}

.canvas-wrapper canvas {
  width: 100%;
  height: auto;
}

它工作得很好但是调整大小手柄总是被画布隐藏。我当然可以在包装器中添加一个带有 resize 属性的额外子元素并将其放在画布上方，但这似乎相当不雅。

现在有什么方法可以影响调整大小手柄的“z-index”吗？

我已经看到this 的问题，但他们也在那里解决了问题。

编辑：似乎句柄在某些浏览器中仍然可用，即使它被画布隐藏（尝试this）。规范可能对这种行为不是很准确。有人知道这方面的更多信息吗？

【问题讨论】：

在 Chrome 和 Firefox 中为我工作得很好。任何 IE 版本都不支持。
@gaynorvader 试试this。你能抓住把手吗？
是的，虽然光标没有改变。
奇怪。在 Firefox 中也是如此？
在 Firefox 中，光标会发生变化，并且工作正常。

标签： css canvas

【解决方案1】：

我在这方面做了一些改动，我认为这就是你想要完成的目标

http://jsfiddle.net/aidan2129/U7J9k/

.canvas-wrapper {
  position: absolute;
  overflow: hidden;
  resize: horizontal;
}

.canvas-wrapper2 {
  position: relative;
  overflow: hidden;
  resize: horizontal;
}


.canvas-wrapper canvas {
  width: 100%;
  height: auto;    
  background-color:blue;
}

.canvas-wrapper2 canvas {
  width: 100%;
  height: auto;    
  background-color:red;
}

它似乎工作正常，我刚刚将位置设置为绝对，因此它不会占用页面的整个长度，但是如果您将结果画布元素调整到右侧，您将看到蓝色画布出现在红色画布后面。

希望对你有帮助

【讨论】：

这对你有用吗？对我来说，这和我的小提琴一样。我认为这是我的 Firefox（Linux 上 27 个）的问题，因为它也适用于 gaynorvader。
是的，如果这对您没有太大帮助，那一定很抱歉，希望您能找到解决方案

【解决方案2】：

由于似乎没有解决方法就没有解决方案，我最终使用了here 中提到的pointer-events: none 属性。这将启用调整大小处理程序（至少在 Firefox 和 Chrome 中对我而言），无论它是否位于画布后面。

对于视觉反馈，我使用了伪元素。请参阅updated fiddle 了解其外观。

【讨论】：