To position objects in defined spatial relationships presupposes a clear understanding of the involved coordinate systems. For DOM related coordinate systems see the Doctest in lib/coordinates.html.
Here we adress the relationship between the PIXI view hierarchy and the DOM hierarchy. As noted in the above mentioned Doctest we choose the page, i.e. the uttermost context, as the common global reference system. To support this we use two PIXIApp methods, since the PIXIApp connects the DOM canvas and the PIXI stage. The methods follow the same signature as the corresponding window methods but use PIXI DisplayObjects as nodes instead of DOM elements:
app.convertPointFromPageToNode(displayObject, x, y)
app.convertPointFromNodeToPage(displayObject, x, y)
The following example shows the relationship between a PIXI object in a scatter application and two DOM elements, a DIV and a CANVAS on top of the PIXI canvas.
Note that the red square is a PIXI graphics object that follows the local point in the women's image in the app.stage. The blue square is a DOM div positioned by CSS top, left whereas the red circle follows the point in a second DOM canvas on top of the PIXI canvas. Since the PIXI App has it's own resolution dependent coordinates app.convertPointFromPageToNode and app.convertPointFromNodeToPage must obey the render resolution. Feel free to test this example with different screen resolutions.