Raphaël - SVG on top of HTML

Question

I'm making a project which uses HTML elements as nodes in a diagram and uses Raphaël to draw lines between them. The problem is that the lines always wind up underneath the HTML elements. I have tried

raphael.canvas.style.zIndex = 1000;

(which is larger than all my other z-indexes) and also tried placing the SVG canvas as the last element in the DOM with no luck. How can I make these lines be drawn on top?

Answer 1

Have you ensured that your SVG element, and its containing element, are relatively or absolutely positioned? z-index only applies to positioned elements, not elements that have static (the default, in-flow) positioning.