引导层4内的SVG线不可见，且带有flex div

Question

我正在尝试将前两个圆div与SVG线连接起来。检查时，我可以看到该行，但在页面上看不到。尝试设置z-index。仍然无法正常工作。当我增加宽度时，它确实起作用。只是div不可见。我想它在任何div后面。但是，如果我设置了z-index，它应该行不通吗？

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>

请找到codepen

Answer 1

不是关于z-index，而是关于overflow。

每当使用svg时，请确保必须使用height, width, overflow CSS属性。

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