Disable a div with a transparent div

Question

I'm trying to disable some portions of my html pages. I read that you can use a transparent div with absolute position on top of your page to prevent clicking on elements beyond it, but is there a way to accomplish this only on a portion of a page (let's assume this portion is all contained in a div) without the use of absolute position?

Answer 1

Put position: relative on the div you want to disable, then add the transparent blocking div as a child of this div with position: absolute and top, bottom, left, right equal to 0.

If you are unable to put position: relative on the div you want to disable then it will be a bit more difficult as you need to compute it's dimensions and offset and then position the transparent mask as a child of the body and at the exact same position as the element you need to disable. JS frameworks (as jQuery) usually provide you with ways to determine a box's offset relative to the document.

Answer 2

Make a little 1px x 1px transparent image and save it as a .png file. In the CSS for your DIV, use this code

background:transparent url('/images/transparent-bg.png') repeat center top;

Remember to change the file path to your transperant image.

I think this solution works in all browsers, maybe except for IE 6, but I haven't tested it.