I'm going to use div to make it seem like I'm connecting multiple divs

That circle is all div, and the image is included in the div tag. At the same time, in order to display text on the image, the text was floated above using z-index and position:solute for text and position:relative for div. And we tried to implement that solid line, similarly, using div as border-left: none. However, as you can see in the link, even if you put div at the bottom of the z-index, the img_box is pushed down.

Circular divs are float: left, stacked in order on the left The text is fixed with position: absolute and top: something px

But later, I tried to put the div in the back, but it didn't work

Help me!

div position z-index absolute relative

2022-09-22 10:41

What do you think will happen without z-index if you wrap it well...?

<div id="donation_diagram"><!-- position: relative; -->
    <div id="back_line"><!-- position: absolute; top: 0; -->
        <svg class="svg" id="svg1"></svg>
        <svg class="svg" id="svg1"></svg>
        <svg class="svg" id="svg1"></svg>
    </div>
    <div id="d_s_s_ctnr"><!-- position: absolute; top: 0; -->
        <div class="d_s_sequence"></div>
        <div class="d_s_sequence"></div>
        <div class="d_s_sequence"></div>
        ...
    </div>
</div>

2022-09-22 10:41

I put the line tag in the svg tag, set the line start end with x1="coordinate", y1="coordinate", x2="coordinate", put stroke="#hexcode" and actually put the line below using z-index.

<!-- <svg class="svg1" width="1000" height="500"><line x1="50" y1="145" x2="1133" y2="145" stroke="#b1b1b1" z-index="-5"></line></svg> -->

Thank you for the good answer~~~~~~~

2022-09-22 10:41

I'm going to use div to make it seem like I'm connecting multiple divs

2 Answers

If you have any answers or tips