Search code examples
htmldisabled-inputcss

Disable a div with a transparent div


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?


Solution

  • 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.