Positioning SVG in front of div

Question

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)

HTML

<section>
  a first section
</section>

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

<section>
  Another section
</section>

CSS

.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");
}

What i get right now is something like this:current result

And what I am looking for is this:desired result

Answer 1

Preliminary remarks

A few remarks about your problem, which may also explain why you haven't received any answers in such a long time:

• Your problem is about the positioning of an SVG image in an HTML document. Playing around with ViewBox won't solve your problem, as this merely dictates what the SVG image should show, and not how the SVG image should be positioned within a parent document, in this case a HTML document. In fact, you could replace the SVG image with a DIV countainer and nothing would change about the solution.

• It isn't really clear what you want:

  • Does come in front and locked to the bottom imply that you want the SVG image to appear when the user scrolls, or with some animation? Or does it mean you want the SVG to be placed there statically, independent of any event?

  • Does centered on the page mean horizontally only? If you meant also vertically, I don't understand how it should be in relation to the height requirements of the DIVs, or the requiement that it should lock to the bottom of the border-div.

  • And does resize when the window is resized only mean change its width or also its height? Because you've defined the height as 600px, which clearly won't respond to any resizing of the window.

  • slip under the rest of my page - I thought the SVG should be on top of everything else?

  • It's not clear whether the first and the last sections should have a stable width, or be responsive. And how they should relate to the 500px. A bit of CSS for them would be good.

  • So the 100px of border-div should be part of the 500px? In the "screenshots" it doesn't seem like it, but the code you posted suggests so.

• Also, there are some inconsistencies in your formulation of the problem:

  • The width of the SVG is defined as 100%, but your pictures show that it's clearly not 100%. After all, if it were 100%, you wouldn't have to worry about centering it, either.

  • The height of the SVG is defined as 600px. If that was the case, it would be taller than the parent DIV, which is only 500px. The pictures show something different.

• Last but not least, left: 50vh will make your SVG start at the horizontal center of the page, and not center it. If you want to center it, it should be (100% - width)/2 and not 100%/2.

Possible solution

In any case, here's the HTML code and the accompanying CSS styles to get what I (possibly incorrectly) interpret you are asking for:

<section id="first">
    A first section
</section>

<section id="height-500">
    <div id="border-div">
        <div id="relative">
            <div id="bottom">
                <svg>
                </svg>
            </div>
        </div>
    </div>
</section>

<section id="another">
    Another section
</section>

And here the CSS:

#first,
#another {
    background: #808000;
    height: 150px;
    width: 100%;
    height: 150px;
}

#height-500 {
    background: green;
    height: 500px;
    position: relative;
}

#border-div {
    background: #008080;
    height: 100px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

#relative {
    position: relative;
    width: 100%;
    height: 100%;
}

#bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

svg {
    display: block;
    background: #f00;
    width: 20vw;
    height: 20vw;
    margin: auto;
}

Explanation of key points

• Setting the position: relative of #height-500 allows you to position #border-div at its bottom. This trick will be used again for #relative and #bottom to place the SVG at the bottom of #border-div (setting width and height to 100% allows the dimensions of #relative to be identical to #border-div).

• Setting the width and height of the SVG to 20vw indicate that we want the SVG to be a square, each side being 20% of the viewport width. If you change the width of your browser, the SVG will resize too.

• margin: auto are used to place block elements in the horizontal center. Note that we need to turn the SVG into a block element for this to work, by setting display: block. (Note that margin: auto doesn't work for really old browsers, but there are workarounds with some additional DIVs.)

• If you want the height of the SVG remain the same, you may want to play around with the preserveAspectRatio attribute to indicate you you want to deal with the changing aspect ratio.

• Note that the viewport width vw also includes the scrollbar and isn't supported by some older browsers. However, there are other methods of keeping the aspect ratio, in case that's a requirement for you.