Absolute position of an element

[Julienng]

Hi,
I work on a fork of wheel-menu (https://github.com/Julienng/wheel-menu) and I've got a problem for the absolute position of the items.

Items are placed around the wheel-button on click/hover event. The center of the box of items is placed on the center of the wheel-button.
This work great with html5/css but when i move to JSF my position are shift to left/bottom.
The tree of my component:

Code: Select all

<pe:layout>
  <pe:layoutPane position="center">
    <p:tabView>
       <h:form>
         <a data-ref="#wheel2" class="wheel-button style="box-sizing: initial;"> <span>+</span></a>
         <ul id="wheel2" class="wheel" style="box-sizing: initial;">
           <li class="wheel-item"><a href="#" >1</a></li>
	   <li class="wheel-item"><a href="#" class="fa fa-cogs" style="font-size: 18px;"></a></li>
	</ul>
       </h:form>
    </p:tabView>
  </pe:layoutPane>
</pe:layout>

Scroll inside the layoutPane seems to have strange behavior with my position. Doesn't understand what happen and how to workaround this.
Does anyone know how can I get the correct absolute position of my 'wheel-button' even if a parent have a scroll?