I’d like my SVG row divider to sit behind the other row with a negative margin. How should I approach this? See screenshot: https://imgur.com/a/uh1c31j
It’s tricky to give you specific advice without being able to inspect the HTML structure of the page.
But you could try setting the position property to relative, either on the boxes themselves or a parent element of the boxes (one or more levels up). Once the positioning is set, applying z-index values will have an effect. So you could bump the z-index value up to 999 for example.
The reason you might need to apply position: relative and z-index: 999 on a parent element, rather than directly on the boxes, is to do with how z-index stacking works. You want to apply the setting to an element that is a sibling of the SVG row divider, or a sibling of an ancestor to the SVG element. Parents set the z-index context for their children, and so sometimes you need to make sure that a parent element has a sufficiently high z-index to display in top of another element, in this case the SVG divider.
I’m pulling this info from memory, there are tutorials out there with clearer / more accurate advice. See the tutorials listed on the z-index CSS reference page.
