javascript - css 溢出无法正常工作

Question

所以我正在为一个实时绘图区编写一个脚本。目前这项工作正在进行中，但这是该区域的 CSS:

#canvas{
    background-repeat: no-repeat;
    cursor:none;
    overflow:hidden !important;
    margin-top:50px;
    width:400px;
    height:300px;
    border:1px #000 solid;
}

现在很明显，在 overflow:hidden 上使用 important 标签，400x300 框外与绘图有关的任何内容都不应显示，但会显示!!!

here is a jsfiddle这样你就可以看到所有的代码了!

如何理解我的意思:

只需单击顶部的画笔，然后按照 p 标记中的说明进行绘图。然后走出盒子，看看它是如何继续绘制的。

注意:

我使用 $('#canvas').prepend(content) 将绘图放入绘图区域，因此它会出现在绘图区域之外的区域是没有意义的溢出:隐藏。有什么想法吗？

Answer 1

很奇怪，但它有帮助:将 position:relative 添加到 #canvas 样式表:

#canvas {
  /* ... */ 
  position: relative;
  /* ... */ 
}

(JSFiddle:http://jsfiddle.net/HEnuj/7/)

我不是 CSS 专家，所以我没有合乎逻辑的解释，除了类似“如果某些元素相对于它们的父元素具有 position:absolute 因此父元素必须是 position:relative"，这就是我记得的。