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.

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.

• javascript
• html
• css

Share Improve this question Follow asked Aug 24, 2014 at 21:34 user299709user299709 5,4221212 gold badges5959 silver badges9090 bronze badges 2

• 1 Does the element have position:absolute ? – Kiee Commented Aug 24, 2014 at 21:35
• Note, the max z-index is usually 2147483647 (source) – GitaarLAB Commented Aug 24, 2014 at 21:41

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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.