How do I use Z-Indexing

[Roxzfr]

Hello, I am a newbie to Webflow so please bear with me! I have created a section and added a Google map, I would like to place an image on top of the map. I understand that to do this I need to change the z-index which effectively ‘layers’ the elements (I think!), can anyone tell me in simple (very) steps how I can do this? Thank you in advance.

[vincent (Vincent Bidaux)]

@Roxzfr

the z-index effectively ‘layers’ the elements (I think!)

It does, you think well.

@Roxzfr

How do I use Z-Indexing?

That’s an excellent question, because Z-index does provoke a lot of frustration.

Grand rules : some aren’t official but come from experience

• z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative
• don’t put too much z-index properties, wait for when you need them, or it will be hard to debug
• try to put your z-indexes on the uppest elements in the hierarchy, and at the same level if possible. For example on sections below the body.
• try to think your indexes in advance and avoid using enormous numbers (zindex 10000) ← no reason for that except it personnally drives me crazy
• if you put a “pair” of z-index to be sure that two elements behave the way you want, try to give those z-index to elements at the same level. Example below

Instead of:

body
– section 1 (zindex 10)
– section 2
– – menu (zindex 20)

… try to do (if you can and if it does the result you want)

body
– section 1 (zindex 10)
– section 2 (zindex 20)
– – menu

Read this page : http://www.w3schools.com/cssref/pr_pos_z-index.asp

And this in-depth article, you’ll learn a lot : The Z-Index CSS Property: A Comprehensive Look — Smashing Magazine

[vincent (Vincent Bidaux)]

Oh, and on Webflow, if you don’t see the zindex box anymore, click again on position:Relative button, sometimes it hides for a reason I ignore.

[Roxzfr]

Thank you Vincent, I’ll give it a go!

Sorry to be cheeky, but I have a couple of other questions - is the higher number higher up the layer system or lower? ie will the zindex20 show on top of zindex10? And another very thick question; At the moment the image is sitting above the map as a separate image, will just changing the zindex make it move on top of the map or do I need to do something else to it? I am guessing one image should be fixed and the other relative, but which one? Sorry for all the questions, I’ve just upgraded from Serif which is pure drag and drop and am about to start learning code - eek!