Guide to positioning SVG elements behind an image responsively using Tailwind CSS:

I need help figuring out how to position SVG's like in the example image found here. The goal is for the SVG's to maintain their positions even when the screen is resized. You can check out a sample link of my attempt before trying it out.

I experimented with creating a wrapper div using a negative z-index, but this caused the images to disappear once I applied the negative z-index (-z-10). Check out the results on this link.

My end goal is to position three leafs just like shown in the reference image.

htmlcsssvgtailwind-csscss-position

Answer №1

To create the desired layout, make sure to use a parent container with position: relative; z-index: 0 to establish a stacking context for its children.

The leaf graphics can be positioned behind the image by using z-index: -10. Since the parent element creates the stacking context, even elements with negative z-index will remain visible within the page:

<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div class="relative z-0 ml-32 mt-16 w-max">
  <img class="rounded-l-md rounded-r-3xl" src="https://placehold.co/308x392" width="308" height="392" />
  <svg viewBox="0 0 87 97" class="absolute -z-10 -rotate-45 w-20 -top-14 -left-14"><use href="#leaf" /></svg>
  <svg viewBox="0 0 87 97" class="absolute -z-10 -rotate-45 -scale-x-100 w-40 bottom-4 -left-32"><use href="#leaf" /></svg>
  <svg viewBox="0 0 87 97" class="absolute -z-10 rotate-45 w-36 bottom-32 -right-24"><use href="#leaf" /></svg>
</div>

<svg class="w-0 h-0" viewBox="0 0 87 97" fill="none" xmlns="http://www.w3.org/2000/svg" id="leaf">
  <path d="M85.2 47C85.2 47 82.7 51.6 80.6 52.4C78.6 53.2 57.7 62.4 54.3 61.9C51 61.3 57.7 56.2 75.5 48.7C93.3 41.3 75.5 20.6 75.5 20.6L75.2 21.5...(truncated)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Jquery bypasses original stylesheet settings when inline styles are removed

I have a CSS file with various styles defined within it. One style in particular has the property position set to 'fixed', but this only applies to specific combinations of classes. For example: .mystyle.blue { position: fixed; } Here, el ...

jquerycss

The CSS pseudo-element ::before is neutralizing the effect of ::

Here's an HTML code snippet: <h1>Example title</h1> This is the corresponding CSS code: h1::first-letter{ display:none; } h1::before{ content: url(http://icons.iconarchive.com/icons/ariil/alphabet/32/Letter-E-icon.png); } I&apo ...

htmlcss

CSS: The button text appears to be aligned to the bottom of a line height that is seemingly larger than

There seems to be a strange issue with the way class styles are being applied to elements, causing them to render differently depending on whether they are applied to an anchor tag or a button. The class 'btn' is defined below; .btn { backg ...

css

How to stop PHP code from running before it should in an HTML form script

I recently created a form where the PHP code is located directly underneath the HTML form code within the same file. The issue I am encountering is that when the user fails to fill out all required fields and submits the form, the page immediately displa ...

phphtmlformssubmitecho

Is there a maximum size limit for the Fabric.js Path Array?

Has anyone tried plotting a line graph using Fabric.js and encountered issues with the fabric.Path? I've noticed that it stops drawing after 8 segments even though I have attempted different methods like loops and individually coding each segment. co ...

javascriptsvgfabricjs

Prevent the shifting of website elements when zooming in or out

As a beginner in HTML/CSS, I am trying to ensure that my content stays in place when zooming in/out or resizing the window. Initially, everything was centered, but after adding position:absolute to the outermost div, the alignment shifted slightly to the l ...

htmlcssweb

Looking for search suggestion functionalities in an HTML input field

I am currently working on a website project and have a database filled with recipes to support it. The issue I am facing is related to the search feature on my webpage. At the top of the page, there is a textarea where users can input their search queries ...

javascripthtmljsonsearch

Having trouble using jQuery's .off() method to remove an event handler?

I'm facing an issue with my jQuery code where the .off('click') method doesn't seem to be working. I've tried removing the event binding from '.reveal-menu', but it's not working as expected. The initial animation wo ...

javascriptjqueryhtmlcss

Is there a way to keep a div element anchored at the top of the page until I reach the bottom and then have it stick to the bottom as I continue

I have a question that I hope is clear enough! On my webpage, there is a div at the top that I want to move to the bottom when I scroll and reach the end of the page. Hopefully, you understand what I'm trying to achieve! If anyone has any ideas, I&ap ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for making sure all images are fully loaded before I use them on my HTML canvas

I have a challenge where I need to draw multiple images on an HTML canvas using JavaScript context.drawImage(Im1 ,205,18,184,38); To ensure that each image loads properly, I have to use a specific code structure which limits my ability to draw with it v ...

html

Using AngularJS to bind radio buttons to ng-model

Here is a snippet of my HTML code where I attempted to bind the "formFriendsAll" scope to the ng-model. <form ng-submit="submitForm()" > <div class="col-sm-3"> <div class="form-group"> <label>Which Persons to show?< ...

javascriptangularjshtmlradio-buttonangularjs-ng-model

What is the best way to display the most recent data from a sqlite database and incorporate animations for a more engaging

Hi there! I'm looking to retrieve data from an SQLite database and display only the latest entry. Additionally, I'd like to create an animation where scrolling reveals one entry at a time. I would greatly appreciate any assistance with this. Pl ...

phphtmldatabasesqlitepdo

Is there a way to determine the remaining time between the present moment and a specific time in JavaScript?

Here's a snapshot of the snippetI have this great idea for a prayer app that can calculate the time remaining between the current time and the scheduled prayer times. My initial approach was to directly find the difference using the following code: ...

javascripthtml

Hide the class containing specific text content by setting the display to none

I am currently working on a Joomla CMS Website that is quite large in scale. Issue: My main problem right now is figuring out how to hide a particular menu tab across the entire site. Unfortunately, this specific menu item does not have a unique identifie ...

javascriptjquerycss

Tips on increasing the height of an element that is overflowing

When populating my timeline component with dynamically mapped data from an array, I encountered an issue where if I added more data causing the maximum height to be reached, the overflow-y element didn't display all content. Despite trying various sol ...

javascripthtmlcssreactjs

The link is identified as a clickable link, however, clicking on it does not direct to the anchor within the

I am experiencing an issue with the following code: <!--/Portfolio Item --> <div style="position: absolute; left: 0px; top: 0px; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); width: 337px; opacity: 1;" class="portfolio-item one-fo ...

htmlhyperlinkanchor

Having difficulty updating a web page while utilizing setInterval() and passing a function that utilizes document.write to display JavaScript content on the page

At the core of my issue lies a blank HTML page that incorporates a JavaScript file, with the following code in the JavaScript file: function doIt() { document.writeln("asdf"); } // Alternatively, you can use setTimeout setInterval("doIt()", 5000); Upon ...

javascripthtmlsettimeoutpollingsetinterval

Having trouble getting a Bootstrap 4 modal to load properly when triggered by a hyperlink

My modal contact form is giving me trouble. It's not loading despite my best efforts to fix it. Below is the code snippet: <div class="row py-2"> <div class="col-sm-3 hidden-md-down"> <a class="bg-circle ...

htmltwitter-bootstrapbootstrap-modalbootstrap-4

Pseudo Elements: The Transformative Power of Before and After

JS Fiddle Looking for some CSS help: <div id="strip"></div> This is my setup: width: 100%; height: 130px; background: grey; I'm trying to add a pseudo-element after the strip, positioned at the bottom. #strip:after { content: "" ...

htmlcss

How can an inline element be made to wrap onto a new line only after it has reached the full width of the page?

Usually, when you have two inline elements and resize the page down, the second element wraps to the next line like this: Is there a way to make it go onto its own line first, and then wrap normally from there? If I use white-space: nowrap on the second ...

csshtml