Gimme the Code!

// move element on top of all others within the same grouping

el.parentNode.appendChild(el); 



// move element underneath all others within the same grouping

el.parentNode.insertBefore(el,el.parentNode.firstChild);



// move element on top of all others in the entire document

el.ownerSVGElement.appendChild(el); 



// move element underneath all others in the entire document

el.ownerSVGElement.appendChild(el,el.ownerSVGElement.firstChild); 

Within Raphael specifically, it's even easier by using toBack() and toFront():

raphElement.toBack()  // Move this element below/behind all others

raphElement.toFront() // Move this element above/in front of all others

Details

SVG uses a painters model when drawing objects: items that appear later in the document are drawn after (on top of) elements that appear earlier in the document. To change the layering of items, you must re-order the elements in the DOM, using appendChild or insertBefore or the like.

You can see an example of this here: http://phrogz.net/SVG/drag_under_transformation.xhtml

1. Drag the red and blue objects so that they overlap.


2. Click on each object and watch it pop to the top. (The yellow circles are intended to always be visible, however.)

The re-ordering of elements on this example is done by lines 93/94 of the source code:

el.addEventListener('mousedown',function(e){

  el.parentNode.appendChild(el); // move to top

  ...

},false);

When the mouse is pushed down on an element, it is moved to be the last element of all its siblings, causing it to draw last, on top of all others.