Position absolute div in a overflow-y: scroll div

Question

I have the following HTML:

<div class="container">
<div class="scrollable-block">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    <div class="absolute-div"></div>
</div>

And CSS:

.container {
    width: 200px;
    height: 300px;
    background: green;
}

.scrollable-block {
    width: 200px;
    max-height: 250px;
    overflow: scroll;
    position: relative;
}

.absolute-div {
    width: 20px;
    height: 20px;
    background: purple;
    position: absolute;
    top: 0;
    right: -10px;
}

And here is a live demo: http://jsfiddle.net/BYTam/1/

The green div is the container and has a fixed width. The yellow div is inside it and has max-height and overflow-y: scroll. It is meant to have the same width as the green one. I am trying to position the purple div absolutely, relative to the yellow div, but outside the green div - reason being that I don't want the yellow div to have horizontal scrollbar. Is that even possible?

Thank you!

Answer 1

You can't do it with your current markup. The absolute-div will always trigger the horizontal scroll bar because it is nested inside the scrollable-block. Seems like modern browsers don't allow the overflow-x:visible with overflow-y:scroll.

Answer 2

I don't think it is possible to have the absolute div poping out of the scroll block. I ran through the same problem and that is how i fixed it:

 <div class="absolute-div"></div> // replace it, put it in the main container.

 $(".absolute-div").css({"top":play with this+"px"}); 
// on scroll of the "scrollable-block" change the ".absolute-div" "top" property using Jquery.