Changing Z-Index of bpmn-elements

due to some modification at bpmn-renderer, I need to change the z-index of the connection-arrow (such that the Connection arrow between 2 modified Elements overlays their Rendering graphics).
I added this css-code to index.html (className was found at diagram-js.css) but it doesn’t work.
.djs-connection {
z-index: 1000;
Thanks in Advance and kind regards

There is a dedicated feature in diagram-js that takes care of ordering.

In bpmn-js this feature is used to specify the order of BPMN elements. You can change the order of sequence flows by overriding the default ordering provider.

I’ve changed the Level of bpmn:SequenceFlow from 3 to 10, but it still doesn’t overlay the custom Rendering graphics. Any suggestions?

I inserted a small example, which shows the problem. The dashed line works and overlays
the custom Rendering, but the other doesn’t. The red rectangle is done with function
drawRect, that I copied from

Maybe, because the red rectangle is actually a svg-Graphic?

How do you add the red rounded rectangle?

Similar as shown in the custom-elements example via a customRenderer. The red rectangles are drawn by the drawRect function, that I linked above and which is within the customRenderer class.

Isn‘t it possible to access the z-index of a svg-graphic?

Isn‘t it possible to access the z-index of a svg-graphic?

No, it is not. The z-index inside an SVG is determined by the order of elements in the SVG.