Text Over Image w/ Absolute Positioning

Question

Maybe it's early for me yet, but I cannot figure out how to position my SVG correctly so that text "floats" on top of it. Basically, I'm trying to accomplish something like:

┌───────────────────────────────────────────────────────────────────────────────────┐
│                                                                                   │
│                                                                                   │
│                                                                                   │
│                                                                                   │
│                                                                                   │
│                                                                                   │
│                                     Main Text                                     │
│                                                                 ┌───────────────┐ │
│                                                                 │               │ │
│                                                                 │  Image in BG  │ │
│                                                                 │               │ │
│                                                                 └───────────────┘ │
│                                                                                   │
└───────────────────────────────────────────────────────────────────────────────────┘

I have this so far:

.hero {
  width: 100%;
  box-sizing: border-box;
  background-color: #1e1e1e;
  position: relative;
  min-height: 350px;
}

.hero-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

<div class="hero">
  <div class="hero-inner">
    Inner Content
  </div>
  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chart-network" class="svg-inline--fa fa-chart-network fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" height="20%" width="20%" viewBox="0 0 640 512" style="bottom: 0; left: 0;">
        <path fill="#fff" opacity="0.3"
            d="M576 192c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zM64 240c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64zm449.6-37.2l-19.2-25.6-48 36 19.2 25.6 48-36zM576 384c-14.4 0-27.6 5-38.3 13l-96-57.6c3.8-11.2 6.3-23 6.3-35.5 0-61.9-50.1-112-112-112-8.4 0-16.6 1.1-24.4 2.9l-40.8-87.4C281.4 96 288 80.8 288 64c0-35.3-28.7-64-64-64s-64 28.7-64 64 28.7 64 64 64c1.1 0 2.1-.3 3.2-.3l41 87.8C241.5 235.9 224 267.8 224 304c0 61.9 50.1 112 112 112 32.1 0 60.8-13.7 81.2-35.3l95.8 57.5c-.5 3.2-1 6.5-1 9.8 0 35.3 28.7 64 64 64s64-28.7 64-64-28.7-64-64-64zm-240-32c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm-184-32h48v-32h-48v32z">
        </path>
    </svg>
</div>

I tried using float on the SVG but it's still influenced by the inner div. What am I missing?

Answer 1

You can use position: absolute; with right and bottom properties, to position the SVG Element.

.hero {
  width: 100%;
  box-sizing: border-box;
  background-color: #1e1e1e;
  position: relative;
  min-height: 350px;
}

.hero-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.hero svg{
  position: absolute;
  bottom: 15%;
  right:-2%;
}

<!-- Hero -->

<div class="hero">
  <div class="hero-inner">
    Inner Content
  </div>
  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chart-network" class="svg-inline--fa fa-chart-network fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" height="20%" width="20%" viewBox="0 0 640 512">
        <path fill="#fff" opacity="0.3"
            d="M576 192c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zM64 240c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64zm449.6-37.2l-19.2-25.6-48 36 19.2 25.6 48-36zM576 384c-14.4 0-27.6 5-38.3 13l-96-57.6c3.8-11.2 6.3-23 6.3-35.5 0-61.9-50.1-112-112-112-8.4 0-16.6 1.1-24.4 2.9l-40.8-87.4C281.4 96 288 80.8 288 64c0-35.3-28.7-64-64-64s-64 28.7-64 64 28.7 64 64 64c1.1 0 2.1-.3 3.2-.3l41 87.8C241.5 235.9 224 267.8 224 304c0 61.9 50.1 112 112 112 32.1 0 60.8-13.7 81.2-35.3l95.8 57.5c-.5 3.2-1 6.5-1 9.8 0 35.3 28.7 64 64 64s64-28.7 64-64-28.7-64-64-64zm-240-32c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm-184-32h48v-32h-48v32z">
        </path>
    </svg>
</div>

Answer 2

I would add some CSS to the SVG. Giving it a position like the example below. Then give the hero-inner a z-index value of 1 to make sure that it's on top. You can try the snippet below:

    .hero {
    width: 100%;
    box-sizing: border-box;
    background-color: #1e1e1e;
    position: relative;
    min-height: 350px;
}

.hero-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    z-index: 1;
}

.hero svg {
  position: absolute;
  bottom: 50px;
  right: 50px;
}

<div class="hero">
<div class="hero-inner">
    Inner Content
</div>
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chart-network"
    class="svg-inline--fa fa-chart-network fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" height="20%"
    width="20%" viewBox="0 0 640 512">
    <path fill="#fff" opacity="0.3"
        d="M576 192c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zM64 240c-35.3 0-64 28.7-64 64s28.7 64 64 64 64-28.7 64-64-28.7-64-64-64zm449.6-37.2l-19.2-25.6-48 36 19.2 25.6 48-36zM576 384c-14.4 0-27.6 5-38.3 13l-96-57.6c3.8-11.2 6.3-23 6.3-35.5 0-61.9-50.1-112-112-112-8.4 0-16.6 1.1-24.4 2.9l-40.8-87.4C281.4 96 288 80.8 288 64c0-35.3-28.7-64-64-64s-64 28.7-64 64 28.7 64 64 64c1.1 0 2.1-.3 3.2-.3l41 87.8C241.5 235.9 224 267.8 224 304c0 61.9 50.1 112 112 112 32.1 0 60.8-13.7 81.2-35.3l95.8 57.5c-.5 3.2-1 6.5-1 9.8 0 35.3 28.7 64 64 64s64-28.7 64-64-28.7-64-64-64zm-240-32c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm-184-32h48v-32h-48v32z">
    </path>
</svg>
</div>