Managing Z-Index
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.
