Find the highest value of the current element Z-index of the page

z-index Property to set the stacking order of elements . Elements with a higher stacking order are always in front of elements with a lower stacking order .
z-index Need and position Property can only take effect when used together .

Use a background

Why do I need to find the current element of the page z-index The highest value ？

When we use some shell components , Hope it appears at the top of the page , Cover the rest of the page , Do such interaction .

Which components need to find the highest of the current page z-index？

For example, the common tooltip dialog popup alert And so on .

I set a large number assigned to z-index No way? ？

scene 1： A page or a project may be developed by more than one person at the same time , You can set a big number to z-index Where you need to . When your colleagues develop , If he finds that his development content is covered by your development content , Just set a larger number to z-index.

scene 2： One dialog Continue to pop up a dialog, So you have to set it twice dialog Of z-index,

In the long term , It will bring a lot of inconvenience to the front-end development .

There are two solutions

1. The front-end team forms a unified specification , Different components set different z-index Range , Different businesses use fixed components .
2. Automatically get the current z-index The highest value , Then add one to it .

If it's the first way , How to form norms , There will be no further discussion here .

obtain z-index The highest value

1. Put all of the entire page dom Get , And turn it into an array .
   document.all It's actually a pseudo array , Need to use Array.from Change my

const allElement = Array.from(document.all);

2. Use window.getComputedStyle() Method to get the name of the element z-index attribute , If you don't get it, just go straight to 0
   Why use getComputedStyle？
   getComputedStyle Not only can you get css Written z-index, You can also get the style in the line

const zIndexArray = []
allElement.forEach((item) => {
    
	zIndexArray.push(Number(window.getComputedStyle(item, null).getPropertyValue("z-index"))
})

3. In some way （ such as max Or sort ） find z-index Maximum value .

const maxZIndex = Math.max(...zIndexArray) 

4. Will be the biggest z-index Add 1 return .

return maxZIndex + 1

The combined code is

function getMaxZIndex() {
    
	const allElement = Array.from(document.all);
	const zIndexArray = []
	allElement.forEach((item) => {
    
		zIndexArray.push(Number(window.getComputedStyle(item, null).getPropertyValue("z-index")) || 0)
	})
	const maxZIndex = Math.max(...zIndexArray)
	return maxZIndex + 1
}

Someone on the current test website will z-index Set up a 1000000

Optimize it properly , We will all be 0 Of z-index Get rid of

function getMaxZIndex() {
    
	const allElement = Array.from(document.all);
	const zIndexArray = []
	allElement.forEach((item) => {
    
		const itemZIndex = Number(window.getComputedStyle(item, null).getPropertyValue("z-index"))
		if(itemZIndex) {
    
			zIndexArray.push(itemZIndex)
		}
	})
	let maxZIndex = 0
	if(zIndexArray.length) {
    
		 maxZIndex = Math.max(...zIndexArray)
	}
	return maxZIndex + 1
}