Ckeditor inline editor stays on screen when scroll

Question

I have a "scrollable" div. Inside this div i have some text and another div with contenteditable=true.

The HTML source looks like this

<div id='scrollable' style="overflow:scroll;height:500px;width:90%;position:absolute">
some text
   <div id='editable' style="color:red" contenteditable=true>editable div</div>
some text
</div>

An inline ckeditor editor for the "editable" div should appear on page load. This is done by focusing the div.

 $( document ).ready(function() {
  $("#editable").focus();
});

The problem is that when i scroll the "scrollable" div the inline editor stays on screen. I want it to stay "out of screen" when i scroll. I mean, i want it to behave like a regular element inside a scrollable div.

I prepared a jsfiddle but for testing i recommend to view the result page separately. Tested in FF and Chrome

Answer 1

You can do something like

$( document ).ready(function() {
  // Handler for .ready() called.
  $("#editable").focus();
     setInterval(function(){$("#cke_editable").css("top",($("#editable").offset().top - $("#cke_editable").height())+"px")})
});

See it work here