Help - Search - Members - Calendar
Full Version: Layers (Or Overlapping?)
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
sonic4
So I want to add a layer above my background image but I don't know how. I want to say that I can achieve it via z-index but I'm not entirely sure. I'm new to web development (but I'm practicing what I know).

Here's an example: http://vignette3.wikia.nocookie.net/sonic/...=20100421153709

Notice that the layer with the content is "hovering" over the background.

Thank you.
pandy
That image is tiny. Do you mean that that the menu seems to be transparent or semi-transparent?
sonic4
I'm so sorry. It looks fine on my end.

Here (I marked on this one so you can see what I mean): http://imgur.com/a/51F45

I marked the overlapped content with a red border. You see how it hovers (I want to say that's the proper term) over the dark blue background? How can I achieve that?
pandy
I'm sorry, but it's still too small and too poor quality for me to see anything special. Just looks like left and right margin to me, but I guess that's not what you mean.

Since it looks like a screen cap of an image that's a screen cap of a webpage, can't you just link to the webpage?
sonic4
That site's long gone but I had to use it as my example.

I accidentally answered my question, though. I have to use <div> elements to achieve "overlapping".

That begs the question as to what z-indexes are for.
pandy
It may be needed - or not. Positioned boxes are automatically on top of not positioned boxes. If two positioned boxes overlap, the one that comes last in the HTML is on top. Only if you need to change that order do you need z-index.

My screen is breaking down, which is another reason for me not seeing what you want me to see in that image.
sonic4
Thank you for your assistance. So for z-indexes, would the following be true:

z-index: -1 (bottom)
z-index: -2 (top)

since -2 is less than -1?
pandy
No, it's the other way around. They higher z-index the more on the top the box is. -2 is lower than -1. Usually large values are used. The value doesn't really matter, but I guess it's easier to keep track of bigger and simpler numbers like 10, 100 and 1000 compared to 1, 2 and 3.

It seems consensus now is that a negative z-index is just a number, i.e. -1 is lower than 1. There was a time when some browsers placed boxes with a negative z-index under the canvas, that is they disappeared behind the background color. But I haven't really kept up with the discussion about that, so some browsers may still do it.


Look at this. The sets of colored boxes are all styled the same, except for the z-index. Note that for the first set (#a) no z-indexes are used. The colored boxes order themselves as they come in the HTML. Change the z-indexes and see what happens. wink.gif

CODE

#a,#b,#c,#d             { position: relative; padding-bottom: 1px }
#b,#c,#d                { margin-top: 200px; }


.red, .green, .blue     { position: absolute;
                          width: 75px; height: 75px }
.red                    { background: red;
                          left: 0; top: 0 }
.green                  { background: green;
                          left: 40px; top: 30px }
.blue                   { background: blue;
                          left: 78px; top: 60px }
                                
                                
#b .red    { z-index: 1000 }
#b .green  { z-index: 100 }
#b  .blue  { z-index: 10 }

#c .red    { z-index: 10 }
#c .green  { z-index: 1000 }
#c .blue   { z-index: 100 }

#d .red    { z-index: 10 }
#d .green  { z-index: -10 }
#d .blue   { z-index: 10 }




HTML
<div id="a">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>

<div id="b">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>

<div id="c">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>

<div id="d">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
Christian J
QUOTE(sonic4 @ Feb 7 2017, 01:40 AM) *

So I want to add a layer above my background image but I don't know how.

A background-image is always in the background, normal content will appear in front of it by default.

For more detailed advice we need to see a code example, but judging from the screenshot no z-index is needed.
Christian J
QUOTE(pandy @ Feb 7 2017, 11:22 AM) *

I'm sorry, but it's still too small and too poor quality for me to see anything special. Just looks like left and right margin to me, but I guess that's not what you mean.

The part of the screenshot outside the red border is a blue background image with a subtle pattern.
Christian J
QUOTE(pandy @ Feb 7 2017, 08:03 PM) *

My screen is breaking down

Maybe you're typing too fast... happy.gif
pandy
QUOTE(Christian J @ Feb 7 2017, 10:09 PM) *

QUOTE(pandy @ Feb 7 2017, 08:03 PM) *

My screen is breaking down

Maybe you're typing too fast... happy.gif


Don't you dare quote my spelling mistakes! angry.gif But look what just happened, it's gone away! Magic! biggrin.gif

No, I'm still on the old broken screen. I waited for that Philips one to come in, but now I've got a cold and don't care. dry.gif

It isn't as bad as it was. The flickering has stopped. Text is pretty OK, but images are not. I guess some component was on its way to give up and now it has and that gives a more stable picture. That's my highly technical conclusion anyway. cool.gif
sonic4
Thank you. I understand it now.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.