diff --git a/js/common/view/CAVObjectNode.ts b/js/common/view/CAVObjectNode.ts
index d0586893..f9d91be8 100644
--- a/js/common/view/CAVObjectNode.ts
+++ b/js/common/view/CAVObjectNode.ts
@@ -45,7 +45,8 @@ export default abstract class CAVObjectNode extends Node {
 
     const viewRadius = modelViewTransform.modelToViewDeltaX( modelRadius );
 
-    // TODO: Make sure it is always in the front in z-ordering, sometimes it gets obscured by adjacent soccer balls
+    // Visibilty controlled by subclass logic. Also this whole node is moved to front when the medianHighlight is shown
+    // so it will appear in front (unless the user drags another object on top of it).
     this.medianHighlight = new Circle( viewRadius + 1.75, {
       fill: CAVColors.medianColorProperty
     } );
diff --git a/js/common/view/DataPointNode.ts b/js/common/view/DataPointNode.ts
index bdd1b0c0..a22a9b23 100644
--- a/js/common/view/DataPointNode.ts
+++ b/js/common/view/DataPointNode.ts
@@ -60,6 +60,12 @@ export default class DataPointNode extends CAVObjectNode {
       [ soccerBall.isMedianObjectProperty, isShowingPlayAreaMedianProperty, soccerBall.isShowingAnimationHighlightProperty ],
       ( isMedianObject, isShowingPlayAreaMedian, isShowingAnimationHighlight ) => {
         this.medianHighlight.visible = isShowingAnimationHighlight;
+
+        // Median highlights should be in front in z-ordering. Rather than accomplishing this via a different layer,
+        // move this to the front when it is visible.
+        if ( this.medianHighlight.visible ) {
+          this.moveToFront();
+        }
       } );
   }
 }
diff --git a/js/common/view/SoccerBallNode.ts b/js/common/view/SoccerBallNode.ts
index 9b101335..5d3c2265 100644
--- a/js/common/view/SoccerBallNode.ts
+++ b/js/common/view/SoccerBallNode.ts
@@ -104,6 +104,12 @@ export default class SoccerBallNode extends CAVObjectNode {
       [ soccerBall.isMedianObjectProperty, isShowingPlayAreaMedianProperty, soccerBall.isShowingAnimationHighlightProperty ],
       ( isMedianObject, isShowingPlayAreaMedian, isShowingAnimationHighlight ) => {
         this.medianHighlight.visible = isShowingPlayAreaMedian && isMedianObject;
+
+        // Median highlights should be in front in z-ordering. Rather than accomplishing this via a different layer,
+        // move this to the front when it is visible.
+        if ( this.medianHighlight.visible ) {
+          this.moveToFront();
+        }
       } );
   }
 }