Managing Z-Index

Asaf Shpigler
Aug 31, 2018 · 1 min read

As apps grow, chaos arises. To remain in control we invent ways to maintain order. Ways like component frameworks and centralized state.

Small issues are often neglected, which costs us in maintainability.
Let’s create order in layering.


Organize zIndex in 3 steps

Visualize Stacking Order
create an array containing strings, the names of components. the order in the array represents the stacking order in the browser.

const components = [
'Chat',
'ProgressBar',
'SideMenu',
]

Get The Index
write a function that gets a string and returns it’s index in the former array.

const components = [
'Chat',
'ProgressBar',
'SideMenu',
]
const getIndex = componentName => (
components.findIndex(cmp => cmp === componentName)
)
export default getIndex

Use It As Z-Index
via inline-styling (or jss) set the component’s zIndex to the value returned from activating getIndex and passing the component’s name.

import React from 'react'
import getIndex from './getZIndex'
const ProgressBar = () => (
<div style={{ zIndex: getIndex(ProgressBar.name) }} />
)
export default ProgressBar

And there you have it folks, You’re welcome!

Presented in React, Works in any framework.

Asaf Shpigler

Written by

Wave Surfing & Web Coding

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade