Question

How to make child “#mark” element to appears “-10px left” inside a div with “overflow-y:hidden ” property

Example here: http://jsfiddle.net/yX9j8/

Tooking off the overflow-y makes visible the “mark” element -10px to left.

Answer 1

You can do that by adding a padding to the scroll, using the background-color on the content instead (looks like that is what matters for you), then the absolute div can be visible on the padding, and will follow the scroll.

#scrollable{
    padding-left: 10px; /* padding goes here */
    /*background-color:#eee;*/
    width:400px;
    height:300px;
    overflow-y:scroll;
    margin-left:50px;
    position:relative;
}
#content{
    background-color:#eee; /* background color goes here */
    height:1900px;
    width:100%;   
}
#mark{
    position:absolute;
    width:10px;
    height:10px;
    background-color:#aaa;
    left: 0;  /* the position of the absoute element */ 
}

​

Example:
http://jsfiddle.net/yX9j8/5/