That is discussed in the Positioning link I posted above. As I am absolutely sure you ARE reading through it, you must have mistakenly overlooked the Introducing z-index section.
In that critical section you would have learned about the Stacking Order that can be controlled by the use of
Can you change the stacking order? Yes, you can, by using the z-index property. "z-index" is a reference to the z-axis. You may recall from previous points in the source where we discussed web pages using horizontal (x-axis) and vertical (y-axis) coordinates to work out positioning for things like background images and drop shadow offsets. (0,0) is at the top left of the page (or element), and the x- and y-axes run across to the right and down the page (for left to right languages, anyway.)
Web pages also have a z-axis — an imaginary line that runs from the surface of your screen, towards your face (or whatever else you like to have in front of the screen). z-index values affect where positioned elements sit on that axis — positive values move them higher up the stack, and negative values move them lower down the stack. By default, positioned elements all have a z-index of auto, which is effectively 0.
So if your svg needs to be on top of the 2 lines then you need to tell it to get on top.
Put a new class on the svg -
<svg class="stack" width="260" height="245" viewbox="0 0 260 245" aria-hidden="true">
Then tell it what to do in the CSS -