css溢出无法正常工作

Question

所以我正在为一个实时绘图区写一个脚本。这是一项正在进行的工作，但这里是该地区的css：

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

现在很明显，使用important上的overflow:hidden标记，400x300框外的任何与绘图有关的内容都不应该显示，但它确实!!! < / p>

here is a jsfiddle所以你可以看到所有代码！

你怎么看我的意思：

只需点击顶部显示画笔的内容，然后按照p标记中的说明进行绘制。然后走到盒子外面，看看它是如何继续绘制的。

请注意：

我使用$('#canvas').prepend(content)将绘图绘制到绘图区域，因此当存在overflow:hidden时，它会显示在其外部区域中是没有意义的。任何想法？

Answer 1

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

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

（JSFiddle：http://jsfiddle.net/HEnuj/7/）

我不是CSS专家所以我没有合理的解释，除了“如果某些元素相对于其父元素position:absolute所以父母必须是position:relative ”之类的东西，那就是我记得的。