Printable Version of Topic

Posted by: MLove Dec 29 2020, 02:43 PM

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)

Posted by: 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. It's even better if you can link to a sample page.

Posted by: MLove Dec 30 2020, 01:02 PM

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;
}

Posted by: pandy Dec 30 2020, 01:37 PM

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.

Posted by: pandy Dec 30 2020, 01:39 PM

Oh, I removed #hero from the selectors since I didn't have it in the HTML. You can put it back, if needed.

Posted by: MLove Dec 30 2020, 01:51 PM

YAY!!!

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

Much appreciated.

-Michael

Posted by: pandy Dec 30 2020, 01:58 PM

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?



The red is my dummy image.