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;
}

现在很明显，在important标签打开overflow:hidden的情况下，400x300 框外与绘图有关的任何内容都不应显示，但确实如此！！！！

这是一个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”之类的东西，就是这样我记得。