Z-index, how does this affect performance?

Question

How does z-index css affect performance?

If I have multiple images on a page, does it matter if I use high z-index values, like 10,000?

For example, a page contains 15 images with z-indices from 500 to 10000, and if the images are moved (jQuery draggable), does this affect performance using high values ​​if the page is redrawn so often?

Answer 1

The number of layers matters, but the actual z-index value does not work. When rendering a page, the browser simply sorts all absolutely positioned elements by their z-index (ascending) and draws them in that order.

EDIT: Also, sorting performance only happens when you change the z-index of the layers. If z-indices often do not change, then a performance hit is likely to not be noticeable. Even if you change z-indexes a lot, sorting a list of 15 items is almost instant.

Answer 2

Yes. How difficult it is to answer without seeing the entire page, however, some performance issues play an important role. With Z index manipulation and jQuery and other libraries that dynamically select and manipulate the DOM, you basically rebuild the layout of the HTML snippets. It is important that the browser does not know what MODAL means. Any request to change the layout essentially asks the browser to recount the DOM. This is your success.

Answer 3

Not being a direct answer to the performance question, another consideration is important when talking about using very high z-index indices:

2147483647 is the maximum z-index in most web browsers because it is the maximum possible 32-bit integer value. Any number higher than 2147483647 will automatically return to 2147483647.

From https://wordpress.org/support/topic/css-reference-to-the-tinymce-absolute-position-handle