CSS - Absolute position , how to ignore left and top of parent

Question

Maybe this question is crazy, I would like to know if there is a way to have an element with css position:absolute that jumps one parent and respect parent's parent left and top.

 <div id='parentParent' style="position:absolute;left: 0 ;top: 0;" >
     <div id='parent' style="position:absolute;left :50% ; top:50%" >
          <canvas id='myElement' style="position:absolute" ></canvas>
     </div>
 </div>

In this case, I need to have myElement inside parent div, but I can't change parent left and top, so I would like to avoid parent's left=50% and top = 50% and has myElement to use left=0 and top=0 but as it is absolute I think it takes parent's left and top. How can I achieve it? preserving this nesting order.

Sorry if this doesn't makes sense or is stupid, but I would like to know if there is a way.

Thank you in advance.

Answer 1

set the parent -> parent to relative. the absolute should respect that as it's starting point so long as the immediate parent is not set to relative as well.

Answer 2

You could always traverse using javascript and set the top?

Get parentParent offset top and the parents top and calculate the position relative to the difference?

Why out of interest do you need to nest the canvas element? can it not just live in the parentParent if it is being positioned absolutely anyway?