diff --git a/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue b/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
index fccee03a..74771d18 100644
--- a/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/packages/vue-flow/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -197,7 +197,9 @@ export default {
         @source-mousedown="(e: MouseEvent) => onEdgeUpdaterSourceMouseDown(e, edge)"
         @target-mousedown="(e: MouseEvent) => onEdgeUpdaterTargetMouseDown(e, edge)"
       />
-      <ConnectionLine v-if="connectionLineVisible && !!sourceNode" :source-node="sourceNode" />
     </g>
   </svg>
+  <svg v-if="connectionLineVisible && !!sourceNode" class="vue-flow__edges vue-flow__connectionline vue-flow__container">
+    <ConnectionLine :source-node="sourceNode" />
+  </svg>
 </template>
diff --git a/packages/vue-flow/src/container/Viewport/Transform.vue b/packages/vue-flow/src/container/Viewport/Transform.vue
index a4044428..9bc2febb 100644
--- a/packages/vue-flow/src/container/Viewport/Transform.vue
+++ b/packages/vue-flow/src/container/Viewport/Transform.vue
@@ -58,8 +58,8 @@ export default {
     class="vue-flow__transformationpane vue-flow__container"
     :style="{ transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})`, opacity: ready ? undefined : 0 }"
   >
-    <NodeRenderer />
     <EdgeRenderer />
+    <NodeRenderer />
     <slot />
   </div>
 </template>
diff --git a/packages/vue-flow/src/style.css b/packages/vue-flow/src/style.css
index 36beb8b8..01afacc1 100644
--- a/packages/vue-flow/src/style.css
+++ b/packages/vue-flow/src/style.css
@@ -69,6 +69,10 @@
   user-select: none;
 }
 
+.vue-flow .vue-flow__connectionline {
+  z-index: 1001;
+}
+
 .vue-flow__connection {
   pointer-events: none;