SVG line inside bootstrap 4 with flex divs not visible

I am trying to connect the first two circle divs with an SVG line. When I inspect, I can see the line but is not visible on the page. Tried to set z-index. Does not work still. When I increase the width, it does work. Just the div is not visible. I suppose it is behind any div. But, if I set z-index, doesn't it supposed to work?

var line = $('#connectedLines');
var div1 = $('#node1');
var div2 = $('#node2');

var x1 = div1.offset().left + (div1.width());
var y1 = div1.offset().top + (div1.height()/2);
var x2 = div2.offset().left + (div2.width()/10);
var y2 = div2.offset().top + (div2.height()/2);

line.attr('x1',x1).attr('y1',y1).attr('x2',x2).attr('y2',y2);

.parentContainer {
  background-image: linear-gradient(to bottom, rgb(253, 118, 49,1) 25%, 
  rgb(255, 157, 107,0.5));
  background-color: #FD7631;
  height: auto;
  padding-bottom: 50px;
  top: 0;
  z-index: -1;
}

.backgroundLines{
  background-image: url("/assets/imgs/lines_background_5.png");
  background-size: cover;
  width: 100%;
  height: 50%;
}

#lines{
  background-image: url("/assets/imgs/lines_background_5.png");
  width: 100%;
  height: 25%;
  margin-top: -300px;
}

#svg{
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 80px;
  z-index: 100000000 !important;
}

#connectedLines{
  display: block;
  stroke-width:10px;
  stroke:black !important;
  z-index: 100000000 !important;
}

.circleParent{
  position: block;
  z-index: 100000000 !important;
}

.img{
  background-image: url("/assets/imgs/img_8.jpg");
  height: 500px;
  width: 75%;
  background-size: cover;
  margin-top: 50px;
}

.comoHR {
  display: block;
  background-color: black;
  width: 50%;
  border: 0;
  height: 8px;
}

.leftContainer{
  width: 25%;
  height: auto;
}

.leftDivContainer{
  background-color: white;
  width: 80%;
  height: 250px;
  border-radius: 50%;
  }

.leftImage{
  height: 50%;
  width: 50%;
}

.middlePad{
  margin-top: 60px;
}

.leftText{
  width: 30%;
  height: auto;
  padding-top: 20px;
}

.comoText {
  padding-top: 20px;
}

.midContainer{
  width: 25%;
  height: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="parentContainer">
    <div class="backgroundLines">
      <div class="d-flex justify-content-center imgParent">
        <div class="img">
        </div>
      </div>
      <br><br><br><br>
      <!-- textt in the top -->
      <div class="d-flex justify-content-between">
        <div class="container">
          <div class="row">
            <div class="col-sm-3">
            </div>
            <div class="col-sm-6">
              <div class="container">
                <div class="col-sm-12">
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="d-flex justify-content-center">
                        <hr class="comoHR">
                        </hr>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="d-flex justify-content-center">
                        <h2>Heading goes here</h2>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="d-flex justify-content-center">
                        <h3> sub heading goes here</h3>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="d-flex justify-content-center">
                        <p>text goes here text goes here text goes here text goes here text goes here
                          text goes here text goes here text goes here text goes here text goes here
                          text goes here text goes here text goes theretext goes here text goes here
                          text goes here text goes here
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-3">
            </div>
          </div>
        </div>
      </div>
    </div>
      <!-- first two circles -->
      <div class="container-fluid circleParent">
        <div class="d-flex justify-content-around">
          <div class="leftContainer d-flex justify-content-center" id="node1">
            <div class="d-flex flex-column align-content-center">
              <div class="leftDivContainer" >
                <div class="d-flex flex-column align-items-center middlePad">
                  <div>
                    <img src="assets/icons/icon_17.png" class="leftImage rounded mx-auto d-block">
                  </div>
                  <h5>Visio</h5>
                </div>
              </div>
            </div>
          </div>
          <div class="circleParent">
            <svg id="svg">
              <line id="connectedLines" stroke="black"/>
          </svg>
          </div>

          <div class="leftContainer d-flex justify-content-center" id="node2">
            <div class="d-flex flex-column align-content-center">
              <div class="leftDivContainer" >
                <div class="d-flex flex-column align-items-center middlePad">
                  <div>
                    <img src="assets/icons/icon_17.png" class="leftImage rounded mx-auto d-block">
                  </div>
                  <h5>normal</h5>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- text after first circles -->
      <div class="d-flex justify-content-around">
        <div class="leftText">
          <p>
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
          </p>
        </div>
        <div class="leftText">
          <p>
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
          </p>
        </div>
      </div>
      <br><br>
      <!-- middle circle -->
      <div class="d-flex justify-content-center">
        <div class="midContainer" id="node2">
          <div class="d-flex flex-column align-items-center">
            <div class="leftDivContainer">
              <div class="">
                <div class="d-flex flex-column align-items-center middlePad">
                  <div>
                    <img src="assets/icons/icon_19.png" class="leftImage rounded mx-auto d-block">
                  </div>
                  <div class="">
                    <h5>Valores</h5>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <!--last text-->
      <br><br><br><br>
      <div class="d-flex justify-content-between">
        <div class="container">
          <div class="row">
            <div class="col-sm-4">
              <h3>child 1</h3>
              <p>
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
              </p>
            </div>
            <div class="col-sm-4">
              <h3>child 2</h3>
              <p>
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
              </p>
            </div>
            <div class="col-sm-4">
              <h3>child 3</h3>
              <p>
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
              </p>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Please find the codepen

Solution

Its not about z-index, its about overflow.

Whenever you are using svg, make sure you must use height, width, overflow CSS properties.

var line = $('#connectedLines');
var div1 = $('#node1');
var div2 = $('#node2');

var x1 = div1.offset().left + (div1.width());
var y1 = div1.offset().top + (div1.height()/2);
var x2 = div2.offset().left + (div2.width()/10);
var y2 = div2.offset().top + (div2.height()/2);

line.attr('x1',x1).attr('y1',y1).attr('x2',x2).attr('y2',y2);

.parentContainer {
  background-image: linear-gradient(to bottom, rgb(253, 118, 49,1) 25%, rgb(255, 157, 107,0.5));
  background-color: #FD7631;
  height: auto;
  padding-bottom: 50px;
  top: 0;
  z-index: -1;
}
.backgroundLines{
  background-image: url("/assets/imgs/lines_background_5.png");
  background-size: cover;
  width: 100%;
  height: 50%;
  /* margin-top: -400px;*/
}

#lines{
  background-image: url("/assets/imgs/lines_background_5.png");
  /* display: inline; */
  width: 100%;
  height: 25%;
  margin-top: -300px;
}

#svg{
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 80px;
  overflow: visible;
}

#connectedLines{
  display: block;
  stroke-width:10px;
  stroke: black !important;
}

.img{
  background-image: url("/assets/imgs/img_8.jpg");
  height: 500px;
  width: 75%;
  background-size: cover;
  margin-top: 50px;
}

.comoHR {
  display: block;
  background-color: black;
  width: 50%;
  border: 0;
  height: 8px;
}

.leftContainer{
  width: 25%;
  height: auto;
}
.leftDivContainer{
  background-color: white;
  width: 80%;
  height: 250px;
  border-radius: 50%;
}
.leftImage{
  height: 50%;
  width: 50%;
}
.middlePad{
  margin-top: 60px;
}
.leftText{
  width: 30%;
  height: auto;
  padding-top: 20px;
}
.comoText {
  padding-top: 20px;
}

.midContainer{
  width: 25%;
  height: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="parentContainer">
    <div class="backgroundLines">
      <div class="d-flex justify-content-center imgParent">
        <div class="img">
        </div>
      </div>
      <br><br><br><br>
      <!-- textt in the top -->
      <div class="d-flex justify-content-between">
        <div class="container">
          <div class="row">
            <div class="col-sm-3">
            </div>
            <div class="col-sm-6">
              <div class="container">
                <div class="col-sm-12">
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="d-flex justify-content-center">
                        <hr class="comoHR">
                        </hr>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="d-flex justify-content-center">
                        <h2>Heading goes here</h2>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="d-flex justify-content-center">
                        <h3> sub heading goes here</h3>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="d-flex justify-content-center">
                        <p>text goes here text goes here text goes here text goes here text goes here
                          text goes here text goes here text goes here text goes here text goes here
                          text goes here text goes here text goes theretext goes here text goes here
                          text goes here text goes here
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-3">
            </div>
          </div>
        </div>
      </div>
    </div>
      <!-- first two circles -->
      <div class="container-fluid circleParent">
        <div class="d-flex justify-content-around">
          <div class="leftContainer d-flex justify-content-center" id="node1">
            <div class="d-flex flex-column align-content-center">
              <div class="leftDivContainer" >
                <div class="d-flex flex-column align-items-center middlePad">
                  <div>
                    <img src="assets/icons/icon_17.png" class="leftImage rounded mx-auto d-block">
                  </div>
                  <h5>Visio</h5>
                </div>
              </div>
            </div>
          </div>
          <div class="circleParent">
            <svg id="svg">
              <line id="connectedLines" stroke="black"/>
          </svg>
          </div>

          <div class="leftContainer d-flex justify-content-center" id="node2">
            <div class="d-flex flex-column align-content-center">
              <div class="leftDivContainer" >
                <div class="d-flex flex-column align-items-center middlePad">
                  <div>
                    <img src="assets/icons/icon_17.png" class="leftImage rounded mx-auto d-block">
                  </div>
                  <h5>normal</h5>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- text after first circles -->
      <div class="d-flex justify-content-around">
        <div class="leftText">
          <p>
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
          </p>
        </div>
        <div class="leftText">
          <p>
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
          </p>
        </div>
      </div>
      <br><br>
      <!-- middle circle -->
      <div class="d-flex justify-content-center">
        <div class="midContainer" id="node2">
          <div class="d-flex flex-column align-items-center">
            <div class="leftDivContainer">
              <div class="">
                <div class="d-flex flex-column align-items-center middlePad">
                  <div>
                    <img src="assets/icons/icon_19.png" class="leftImage rounded mx-auto d-block">
                  </div>
                  <div class="">
                    <h5>Valores</h5>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <!--last text-->
      <br><br><br><br>
      <div class="d-flex justify-content-between">
        <div class="container">
          <div class="row">
            <div class="col-sm-4">
              <h3>child 1</h3>
              <p>
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
              </p>
            </div>
            <div class="col-sm-4">
              <h3>child 2</h3>
              <p>
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
              </p>
            </div>
            <div class="col-sm-4">
              <h3>child 3</h3>
              <p>
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
              </p>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Codepen: https://codepen.io/anon/pen/QXwpmR