3

I created a simple chrome extension tool to show small text message (a div with z-index 999999) on the page a user will be browsing. Sometimes, the div still appears below the existing page's elements and worse, the contents of the div changes because the page already has it's own CSS rules.

The challenge is how to ensure that my text message will appear on top of all elements (works on any site) and that it will look consistent and unaffected by existing CSS rules.

Would iframe solve this issue? But still, even with an iframe, it still needs to appear on top of all elements and seems like z-index doesn't work always.

user299709
  • 4,922
  • 10
  • 56
  • 88

1 Answers1

6

If you want to overlap anything with any element, use z-index. You must consider:

  • You must use the highest z-index value you can, in order to position the element above other elements in the same stacking context.
    See Minimum and Maximum value of Z-INDEX.

  • To make z-index work, the element must be positioned.
    For example, position: relative or position: absolute.

  • A huge z-index will be useless if its stacking context is below other elements. To avoid this situation:

    • Reduce as much as you can the number of ancestors of your element, which potentially could be stacking contexts.
    • Make sure they aren't stacking contexts. They will need
      • z-index: auto
      • opacity: 1
      • On some browsers, position shouldn't be fixed
      • will-change shouldn't be any of the properties above

  • If there is flash, you won't be able to overlap it whatever the z-index unless you modify its wmode attribute to transparent or opaque.
    Note this change will hurt the performance of that applet.

Alternatively, HTML5 introduces <dialog> element, which has showModal method. Thad method, when called, pushes the dialog to document's pending dialog stack, which means that it will be added to the top layer layer.

Community
  • 1
  • 1
Oriol
  • 274,082
  • 63
  • 437
  • 513
  • looks like dialog element is not supported in my chrome browser. sucks....would've been the perfect solution, I found the polyfill version but not sure if it is up to par with the https://github.com/GoogleChrome/dialog-polyfill – user299709 Aug 25 '14 at 04:37
  • @user299709 I think `` is currently only supported by chrome, but you have to enable a flag. – Oriol Aug 25 '14 at 10:43