How the z-index works

z-index basics

For those of us that are just beginning to get familiar with Webflow, what are the basics of how the z-index works? I am Photoshop-savvy, and I am completely comfortable with layers, but this format is a little different. Any help would be appreciated!

Z-Index of 0 = bottom layer
Z-Index of any other number = the layer it is on :smile:

So the one with the highest Z-Index value will be the top layer :slight_smile:

***Edit as mentioned by @ilikewebdesign : The element position must be set to either Relative, Absolute or Fixed in order to modify the Z-Index :smile:

Cool! Makes sense… which button is that in the Designer UI?

Nevermind… I found it! It’s under the Position tab at the very bottom-right. You do have to enable the Advanced tools though…

2 Likes

The position also has to be set to something other than Auto…

2 Likes

Yes z index only effect elemets that are set to something other then static, which is auto. So anything that has relative, obsolute or fixed positioning

2 Likes