css溢出无法正常工作

Question

So I am writing a script for a live drawing area. It is a work in progress right now, but here is the css for the area:

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

Now clearly, with the important tag on overflow:hidden , anything outside the 400x300 box that has to do with drawing should not show, but it does!!!

here is a jsfiddle so you can see all the code!

How you can see what I mean:

Just click on the thing at the top that says paintbrush and follow the instructions in the p tag for drawing. Then go outside of the box and see how it continues to draw.

note:

I use $('#canvas').prepend(content) to get the drawing into the drawing area, so it makes no sense that it would show up in areas outside it when there is an overflow:hidden . any ideas?

Answer 1

Weird , but it helps: add position:relative to #canvas stylesheet:

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

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

I'm not CSS specialist so i have no logical explanation , except of something like " if some elements has position:absolute relatively to their parent so parent must be position:relative " , thats what i remember.