Question

I want to float a element so that it stays above elements on its right and bottom. This is easily achieved moving the element to the body and then use position: absolute and top left javascript to position it next to the relative element.

I cant use this method because the items need to stay in its parent, becasue the parent can at any point change (Paging scenario).

Is there anyway to let the item stay in its original container and let it float?

I tried using position: relative; but it will not work has i need it to

Some more info: the markup looks something like this, pseduo code

<parent>
       <sibling></sibling>
       <my-float-element></my-float-element>
</parent>
<parent-sibling></parent-sibling>

And a image showing desired result

• Blue: parent
• Purple: parent sibling
• Cyan: Sibling
• Red: Element that I want to float

edit: Someone changed the tags, I can use javascript to some degree to solve this

Answer 1

Make the parent have position: relative and keep using absolute positioning. This will scope the position of the child to the top left corner of the parent instead of the body element.