src/sap.ui.dt/src/sap/ui/dt/ElementOverlay.js
function(oChild1, oChild2) {
			var oGeometry1 = DOMUtil.getGeometry(oChild1);
			var oGeometry2 = DOMUtil.getGeometry(oChild2);
			var oPosition1 = oGeometry1 && oGeometry1.position;
			var oPosition2 = oGeometry2 && oGeometry2.position;

			if (oPosition1 && oPosition2) {
				var iBottom1 = oPosition1.top + oGeometry1.size.height;
				var iBottom2 = oPosition2.top + oGeometry2.size.height;

				if (oPosition1.top < oPosition2.top) {
					if (iBottom1 >= iBottom2 && oPosition2.left < oPosition1.left) {
						/*  Example:
							            +--------------+
							+------+    |              |
							|  2   |    |       1      |
							+------+    |              |
							            +--------------+
							Despites 1st overlay's top is above 2nd element,
							the order should be switched, since 2nd element
							is shorter and is more to the left
						 */
						return 1;
					} else {
						return -1; // do not switch order
					}
				} else if (oPosition1.top === oPosition2.top) {
					if (oPosition1.left === oPosition2.left) {
						// Give priority to smaller block by height or width
						if (
							oGeometry1.size.height < oGeometry2.size.height
							|| oGeometry1.size.width < oGeometry2.size.width
						) {
							return -1;
						} else if (
							oGeometry1.size.height > oGeometry2.size.height
							|| oGeometry1.size.width > oGeometry2.size.width
						) {
							return 1;
						} else {
							return 0;
						}
					} else if (oPosition1.left < oPosition2.left) {
						return -1; // order is correct
					} else {
						return 1; // switch order
					}
				} else if (iBottom1 <= iBottom2 && oPosition2.left > oPosition1.left) { // if (oPosition1.top > oPosition2.top)
					/* see picture above, but switch 1 and 2 - order is correct */
					return -1;
				} else {
					/*  Example:
						            +--------------+
						+------+    |       2      |
						|  1   |    +--------------+
						|      |
						+------+

						Since 1st overlay's both top and bottom coordinates are
						bellow in dom, then top and bottom of 2nd, they should be switched
					 */
					return 1;
				}
			}
			return 0;
		}
function(oChild1, oChild2) {
			var oGeometry1 = DOMUtil.getGeometry(oChild1);
			var oGeometry2 = DOMUtil.getGeometry(oChild2);
			var oPosition1 = oGeometry1 && oGeometry1.position;
			var oPosition2 = oGeometry2 && oGeometry2.position;

			if (oPosition1 && oPosition2) {
				var iBottom1 = oPosition1.top + oGeometry1.size.height;
				var iBottom2 = oPosition2.top + oGeometry2.size.height;

				if (oPosition1.top < oPosition2.top) {
					if (iBottom1 >= iBottom2 && oPosition2.left < oPosition1.left) {
						/*  Example:
							            +--------------+
							+------+    |              |
							|  2   |    |       1      |
							+------+    |              |
							            +--------------+
							Despites 1st overlay's top is above 2nd element,
							the order should be switched, since 2nd element
							is shorter and is more to the left
						 */
						return 1;
					} else {
						return -1; // do not switch order
					}
				} else if (oPosition1.top === oPosition2.top) {
					if (oPosition1.left === oPosition2.left) {
						// Give priority to smaller block by height or width
						if (
							oGeometry1.size.height < oGeometry2.size.height
							|| oGeometry1.size.width < oGeometry2.size.width
						) {
							return -1;
						} else if (
							oGeometry1.size.height > oGeometry2.size.height
							|| oGeometry1.size.width > oGeometry2.size.width
						) {
							return 1;
						} else {
							return 0;
						}
					} else if (oPosition1.left < oPosition2.left) {
						return -1; // order is correct
					} else {
						return 1; // switch order
					}
				} else if (iBottom1 <= iBottom2 && oPosition2.left > oPosition1.left) { // if (oPosition1.top > oPosition2.top)
					/* see picture above, but switch 1 and 2 - order is correct */
					return -1;
				} else {
					/*  Example:
						            +--------------+
						+------+    |       2      |
						|  1   |    +--------------+
						|      |
						+------+

						Since 1st overlay's both top and bottom coordinates are
						bellow in dom, then top and bottom of 2nd, they should be switched
					 */
					return 1;
				}
			}
			return 0;
		}
function ( oChild1 , oChild2 ) { var oGeometry1 = DOMUtil . getGeometry ( oChild1 ) ; var oGeometry2 = DOMUtil . getGeometry ( oChild2 ) ; var oPosition1 = oGeometry1 && oGeometry1 . position ; var oPosition2 = oGeometry2 && oGeometry2 . position ; if ( oPosition1 && oPosition2 ) { var iBottom1 = oPosition1 . top + oGeometry1 . size . height ; var iBottom2 = oPosition2 . top + oGeometry2 . size . height ; if ( oPosition1 . top < oPosition2 . top ) { if ( iBottom1 >= iBottom2 && oPosition2 . left < oPosition1 . left ) { /*  Example:
							            +--------------+
							+------+    |              |
							|  2   |    |       1      |
							+------+    |              |
							            +--------------+
							Despites 1st overlay's top is above 2nd element,
							the order should be switched, since 2nd element
							is shorter and is more to the left
						 */ return 1 ; } else { return - 1 ; // do not switch order } } else if ( oPosition1 . top === oPosition2 . top ) { if ( oPosition1 . left === oPosition2 . left ) { // Give priority to smaller block by height or width if ( oGeometry1 . size . height < oGeometry2 . size . height || oGeometry1 . size . width < oGeometry2 . size . width ) { return - 1 ; } else if ( oGeometry1 . size . height > oGeometry2 . size . height || oGeometry1 . size . width > oGeometry2 . size . width ) { return 1 ; } else { return 0 ; } } else if ( oPosition1 . left < oPosition2 . left ) { return - 1 ; // order is correct } else { return 1 ; // switch order } } else if ( iBottom1 <= iBottom2 && oPosition2 . left > oPosition1 . left ) { // if (oPosition1.top > oPosition2.top) /* see picture above, but switch 1 and 2 - order is correct */ return - 1 ; } else { /*  Example:
						            +--------------+
						+------+    |       2      |
						|  1   |    +--------------+
						|      |
						+------+

						Since 1st overlay's both top and bottom coordinates are
						bellow in dom, then top and bottom of 2nd, they should be switched
					 */ return 1 ; } } return 0 ; }
compares two DOM Nodes and returns 1, if first child should be bellow in dom order
compares two DOM Nodes and returns 1 if first child should be bellow in dom order