Search code examples
htmlcsssvgpositionlayer

HTML/CSS_IMG and SVG layering

I need to solve issue with layering. On the background I need to have rect, then above it img and all other elements on the top, like in the example picture. I tried to use z-index for this.

enter image description here

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>z-index</title>

    <style>
      svg {
        width: 500px;
        height: 300px;
      }

      .img-overlay-wrap img {
        position: absolute;
        top: 20px;
        left: 80px;
        z-index: 0;
      }

      .img-overlay-wrap svg {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: -1;
      }

      .front {
        position: absolute;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="img-overlay-wrap">
      <h1>Header</h1>
      <svg>
        <rect x="0" y="0" width="500" height="300" fill="#dcd1c4"></rect>
        <g class="front">
          <text style="color: #538b01;" x="150" y="150">SVG Text</text>
          <line x1="34" y1="47" x2="279" y2="47" stroke="black" />
        </g>
      </svg>
      <img
        src="https://4.bp.blogspot.com/-6QFHkPCFUJE/US10_Byu7TI/AAAAAAAADm0/zRcsPaMQpp8/s1600/pink+camellia.jpg"
        height="200"
      />
    </div>
  </body>
</html>

Approach to put img in between 2 SVG-elements gave same result:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>z-index</title>

    <style>
      svg {
        width: 500px;
        height: 300px;
      }

      .img-overlay-wrap img {
        position: absolute;
        top: 20px;
        left: 80px;
        z-index: 0;
      }

      .img-overlay-wrap svg {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: -1;
      }

      .front {
        position: absolute;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="img-overlay-wrap">
      <h1>Header</h1>
      <svg>
        <rect x="0" y="0" width="500" height="300" fill="#dcd1c4"></rect>
      </svg>
      <img  src="https://4.bp.blogspot.com/-6QFHkPCFUJE/US10_Byu7TI/AAAAAAAADm0/zRcsPaMQpp8/s1600/pink+camellia.jpg"
        height="200"
      />
      <svg>
        <text style="color: #538b01;" x="150" y="150">SVG Text</text>
        <line x1="34" y1="47" x2="279" y2="47" stroke="black" />
      </svg>
    </div>
  </body>
</html>

Tried tag use with the attribute xlink:href, but also without success🙁:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>z-index</title>

    <style>
      svg {
        width: 500px;
        height: 300px;
      }

      .img-overlay-wrap img {
        position: absolute;
        top: 20px;
        left: 80px;
        z-index: 0;
      }

      .img-overlay-wrap svg {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: -1;
      }

      .front {
        position: absolute;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div class="img-overlay-wrap">
      <h1>Header</h1>
      <svg>
        <rect x="0" y="0" width="500" height="300" fill="#dcd1c4"></rect>
        <g class="front">
          <text style="color: #538b01;" x="150" y="150">SVG Text</text>
          <line x1="34" y1="47" x2="279" y2="47" stroke="black" />
        </g>
        <use xlink:href=".front"/>
      </svg>
      <img
        src="https://4.bp.blogspot.com/-6QFHkPCFUJE/US10_Byu7TI/AAAAAAAADm0/zRcsPaMQpp8/s1600/pink+camellia.jpg"
        height="200"
      />
    </div>
  </body>
</html>

Solution

  • The solution is:

    1. Putsvg with rect as background
    2. Put img
    3. Put h1
    4. Putsvg with other elements

    For all of them z-index should be the same.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>z-index</title>

    <style>
      svg {
        width: 500px;
        height: 300px;
      }

      .img-overlay-wrap img {
        position: absolute;
        top: 20px;
        left: 80px;
      }

      .img-overlay-wrap svg {
        position: absolute;

      }

      .front {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div class="img-overlay-wrap">
      
      <svg>
        <rect x="0" y="0" width="500" height="300" fill="#dcd1c4"></rect>
      </svg>
      
      <img  src="https://4.bp.blogspot.com/-6QFHkPCFUJE/US10_Byu7TI/AAAAAAAADm0/zRcsPaMQpp8/s1600/pink+camellia.jpg"
        height="200"
      />
      <h1 class="front">Header</h1>
      <svg>
        <text style="color: #538b01;" x="150" y="150">SVG Text</text>
        <line x1="34" y1="47" x2="279" y2="47" stroke="black" />
      </svg>
    </div>
  </body>
</html>