The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Z-Index <img> and <svg>, Layer an image over an svg
MLove
post Dec 29 2020, 02:43 PM
Post #1





Group: Members
Posts: 3
Joined: 29-December 20
Member No.: 27,700



I am trying to overlay a static image over an svg. I wrapped the image and the svg into a div and tried using z-index but have been unsuccessful. The image is the NOWI logo in the lower right corner that I want to place over the moving wave svg. Thanks in advance for your help.

I have been previewing from a local html.index so I can't provide a URL.

I've attached a screenshot of the preview and the css.


Attached thumbnail(s)
Attached Image Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 29 2020, 05:02 PM
Post #2


Computer says no 🌟
********

Group: WDG Moderators
Posts: 19,402
Joined: 9-August 06
Member No.: 6



It looks like you've given the SVG a higher z-index, so it would be on top if it worked. But AFAICS the SVG isn't positioned, so z-index doesn't apply.


'z-index'
Applies to: positioned elements

http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index

Please post HTML and CSS here as text, not images. We don't want to type that up. wink.gif It's even better if you can link to a sample page.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MLove
post Dec 30 2020, 01:02 PM
Post #3





Group: Members
Posts: 3
Joined: 29-December 20
Member No.: 27,700



QUOTE(pandy @ Dec 29 2020, 05:02 PM) *

It looks like you've given the SVG a higher z-index, so it would be on top if it worked. But AFAICS the SVG isn't positioned, so z-index doesn't apply.


'z-index'
Applies to: positioned elements

http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index

Please post HTML and CSS here as text, not images. We don't want to type that up. wink.gif It's even better if you can link to a sample page.



Thank you for your reply. I tried adding position to the svg and still no luck. Sorry about the css image. I don't have access to a server to test, so I'm just previewing on a browser. Here's the portion with my attempt at getting this right:

HTML:
<div class="img-overlay-wrapper">
<img src="assets/img/NOWI_Logo_color_sm.png">
<svg class="hero-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28 " preserveAspectRatio="none">

<defs>
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z">
</defs>
<g class="wave1">
<use xlink:href="#wave-path" x="50" y="3" fill="rgba(0,156,138, .1)">
</g>
<g class="wave2">
<use xlink:href="#wave-path" x="50" y="0" fill="rgba(0,156,138, .2)">
</g>
<g class="wave3">
<use xlink:href="#wave-path" x="50" y="9" fill="#fff">
</g>
</svg>
</div>

CSS:
#hero .img-overlay-wrapper {
width:100%;

}

#hero .img-overlay-wrapper img {
position:relative;
clear:both;
bottom:0px;
left:75%;
max-height:50px;
z-index:2;
}

#hero .img-overlay-wrapper svg{
position:static;
z-index:1;
}

.hero-waves {
display: block;
width: 100%;
height: 60px;
position: relative;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 30 2020, 01:37 PM
Post #4


Computer says no 🌟
********

Group: WDG Moderators
Posts: 19,402
Joined: 9-August 06
Member No.: 6



The z-index works now. Problem is the image isn't positioned on top of the SVG. 'position: relative' places the box relative where it would have been had it not been positioned. So 'bottom: 100px' moves it 100px up and 'bottom: 0' does nothing.

This would be more easily done with position absolute. Then we need to make .img-overlay-wrapper position relative. Without any offset (top, bottom and so on) it doesn't affect the position of the box. But it creates a positioning context for boxes within it. I.e. when we position the image absolute, it will be relative the edges of .img-overlay-wrapper. You can remove the height and some other things too.

It's interesting with the SVG. Normally a positioned box is on top of non positioned boxes, no z-index is needed. But without z-index the image ends up between the swirls. On top of the green one and under the white one. And it's translucent. Beats me - never seen this before and I don't know what the explanation may be.

Also, I expressed myself a little sloppily before. z-index applies to boxes with a position other than static.. When we speak of positioning we mean other than static since static is the default state, not really positioning, even if things can be reset with 'position: static'. I should have said that.

I think this is all you need.

CODE

.img-overlay-wrapper        { position: relative }


.img-overlay-wrapper img    { position: absolute;
                              left: 75%; bottom: 0;
                              max-height: 50px;
                              z-index: 100 }


.hero-waves                 { display: block;
                              width: 100%; height: 60px }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 30 2020, 01:39 PM
Post #5


Computer says no 🌟
********

Group: WDG Moderators
Posts: 19,402
Joined: 9-August 06
Member No.: 6



Oh, I removed #hero from the selectors since I didn't have it in the HTML. You can put it back, if needed.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MLove
post Dec 30 2020, 01:51 PM
Post #6





Group: Members
Posts: 3
Joined: 29-December 20
Member No.: 27,700



YAY!!!

It works! Thank you so much for your help, and the education.

Much appreciated.

-Michael
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 30 2020, 01:58 PM
Post #7


Computer says no 🌟
********

Group: WDG Moderators
Posts: 19,402
Joined: 9-August 06
Member No.: 6



You're welcome. Positioning is tricky at first. Takes more than one read to get one's head around it. There are tutorials, but I don't know which are up to date.

BTW here's how it looked without z-index. Strange, huh?

Attached Image

The red is my dummy image.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 26th January 2021 - 07:39 AM