title: Positioning SVG in front of div
body: <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>