Question

I am adjusting a site at http://nces.ed.gov. I’m trying to add an html layer that appears above the header. I have no control of the header and footer, only the content in the page. But somehow, even with me adjusting my z-index, the header and menu appear over my layer.

I’ve used firebug to adjust stuff but still can’t get it to work. Any ideas? Since the header appears at the top and has zIndex 9999, and my layer has zIndex: 10000, does the 9999 still win?

I’m using Firefox 7 by the way.

Thanks!

Answer 1

Make sure you set the position property of the element to absolute (if i understand your problem correctly).

Using firebug i could insert a div above anything ..

If it is a case that your layer is inserted in other positioned elements, that might cut it off, make sure to re-locate your layer to be directly under the body. (you can use javascript/jQuery if you cannot alter the actual contents of the page)

---

For example, using

$$i('<div>', {
  text: 'i am the layer',
  css: {
         width:'100%',
         color: 'red',
         backgroundColor: 'yellow',
         zIndex: 9999,
         line-height:'40px',
         position: 'absolute',
         top: 0,
         left:0
       }
}).appendTo('body');

will insert a layer at the top of the page on top of everything..