Resource Center or Guide Badge Blocking Functionality / Finding the Largest Z-Index

Alexandra Murphy

June 10, 2022 19:59

If a Resource Center or Guide badge is sitting on top of an element on your page and blocking important content or the ability for users to interact with the element, a possible solution may be to adjust the z-index of the badge to hide it behind that element.

Here are some steps you can take to identify the highest z-index value that exists on the page:

Right click anywhere on the page
Click "Inspect"
Open your developer console by choosing the "console" tab
Copy and paste the code snippet below next to the blinking cursor
Hit enter on your keyboard

You can then use this value to decide the appropriate z-index of your badge (located in the styling tab of the visual designer).

function getMaxZIndex() {
  return Math.max(
    ...Array.from(document.querySelectorAll('body *'), el =>
      parseFloat(window.getComputedStyle(el).zIndex),
    ).filter(zIndex => !Number.isNaN(zIndex)),
    0,
  );
}
console.log(getMaxZIndex());

Resource Center or Guide Badge Blocking Functionality / Finding the Largest Z-Index

Comments

Didn't find what you were looking for?