Positioning SVG in front of div
<p>Started playing around with SVG and am having trouble getting it to position the way i want to. What I want to achieve is for my SVG to come in front and locked to the bottom of the border-div and be centered on the page as well as resize when the window is resized (responsive). So far I've played with the viewbox and height/width properties of the SVG to get the responsive behavior but I can't figure out to not have the SVG slip under the rest of my page(see picture to have a better idea of what's hapenning). I tried to play with the z-index and position:absolute but to no avail. Here's what I have so far for my code: (I use the bootstrap framework with SASS)</p>

<p>HTML</p>

<pre><code>&lt;section&gt;
  a first section
&lt;/section&gt;

&lt;section class="parallax1"&gt;
&lt;div class="container-fluid"&gt; 
  &lt;div class="row"&gt;
    &lt;div style="height:500px;"&gt;
      &lt;div class="col-sm-12 border-div"&gt;
        &lt;div class="col-sm-12"&gt;
          &lt;svg xmlns="http://www.w3.org/2000/svg" class="svg-test" viewBox="0 0 500 375"&gt;my SVG&lt;/svg&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;

&lt;section&gt;
  Another section
&lt;/section&gt;
</code></pre>

<p>CSS</p>

<pre><code>.border-div{
  height:100px;
  background-color: $orange-background;
}

.svg-test{      
  left: 50vw;
  width: 100%;
  height: 600px; 
}

.parallax1{
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("../images/bkgnd.jpg");
}
</code></pre>

<p>What i get right now is something like this:<a href="http://i.stack.imgur.com/b2w3i.png" rel="nofollow">current result</a></p>

<p>And what I am looking for is this:<a href="http://i.stack.imgur.com/mZiye.png" rel="nofollow">desired result</a></p>