How to move html element over a SVG element?-CodePudding

How to put the text (Paragraph element) over the svg element that I have on my footer. I've tried using z-index:-0 into my svg but it's not working.

I'm using tailwindcss for css. Here's what current output looks like.

<footer>

  <div class="mx-auto">
    <div class="flex justify-center">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, qui!</p>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class=""style="position:absolute; z-index: -1;">
    <path fill="#273036" fill-opacity="1" d="M0,224L30,224C60,224,120,224,180,202.7C240,181,300,139,360,122.7C420,107,480,117,540,106.7C600,96,660,64,720,69.3C780,75,840,117,900,144C960,171,1020,181,1080,154.7C1140,128,1200,64,1260,53.3C1320,43,1380,85,1410,106.7L1440,128L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z">

  </path>
  
  
  
  </svg>       
</div>
</footer>

CodePudding user response：

What you are trying to do(bring the text over the svg) can be easily achieved by just adding display: flex to you parent div.

Here is the code that you can use:

<footer>

  <div class="mx-auto" style="display: flex">
    <div class="flex justify-center">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, qui!</p>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class=""style="position:absolute; z-index: -1;">
    <path fill="#273036" fill-opacity="1" d="M0,224L30,224C60,224,120,224,180,202.7C240,181,300,139,360,122.7C420,107,480,117,540,106.7C600,96,660,64,720,69.3C780,75,840,117,900,144C960,171,1020,181,1080,154.7C1140,128,1200,64,1260,53.3C1320,43,1380,85,1410,106.7L1440,128L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z">

  </path>
  
  
  
  </svg>       
</div>
</footer><footer>

  <div class="mx-auto">
    <div class="flex justify-center">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, qui!</p>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class=""style="position:absolute; z-index: -1;">
    <path fill="#273036" fill-opacity="1" d="M0,224L30,224C60,224,120,224,180,202.7C240,181,300,139,360,122.7C420,107,480,117,540,106.7C600,96,660,64,720,69.3C780,75,840,117,900,144C960,171,1020,181,1080,154.7C1140,128,1200,64,1260,53.3C1320,43,1380,85,1410,106.7L1440,128L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z">

  </path>
  
  
  
  </svg>       
</div>
</footer>

You can also make the svg's position sticky and then move the text around as per need but I think that the code that I gave will work too and will require less work.

To achieve a clean look for the text in mobile view you should use clamping. Here is a article about clamping in css: Clamping article

CodePudding user response：

John if I understood your question corretly, you are trying to get the text over the svg right?

try adding display: flex; to your parent div.

<div class="mx-auto" style="display: flex">

that may work