Why does “overflow-y:hidden” affect the visibility of items overflowing on the x axis?

Question

Consider this example:

http://jsfiddle.net/treeface/P8JbW/

HTML:

Answer 1

overflow is intended to be used with elements that are not absolutely positioned. If you want to handle the clipping of an absolutely positioned element, use the clip css property. So to clip on the bottom and top of your containing div, but not the left or right, do this:

#test {
    position:relative;
    margin-left:50px;
    margin-top:50px;
    border:1px solid black;
    height:50px;
    width:50px;
    clip: rect(auto,auto,auto,-11px);
}

Sample: http://jsfiddle.net/treeface/UJNcf/6/