css overflow не работает должным образом

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 окна, которое имеет отношение к рисунку не должен показывать, но он !!!

here is a jsfiddle, так что вы можете увидеть весь код!

Как вы можете увидеть, что я имею в виду:

Просто нажмите на вещи в верхней части, которая говорит кисточку и следовать инструкциям в p тег для рисования. Затем выйдите за пределы поля и посмотрите, как он продолжает рисовать.

примечание:

Я использую $('#canvas').prepend(content), чтобы получить рисунок в области рисования, так что это не имеет смысла, что бы показать в районах за ее пределами, когда есть overflow:hidden. есть идеи?

Answer 1

Weird, но это помогает: добавить position:relative в #canvas стилей:

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

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

Я не специалист CSS, так что я не имею никакого логического объяснения, кроме чего-то вроде "если некоторые элементы имеют position:absolute относительно их родителей, поэтому родитель должен быть position:relative ", вот что я помню.