2

I have a div which I have set to absolute position and z-index above all the other divs on the page. The issue I'm having is where the absolute position div sits is above some divs that are interactive with the users mouse. Is there a way to turn off the interactive state of the absolute positioned div so the divs below are active.

Chapsterj
  • 6,483
  • 20
  • 70
  • 124
  • Take a look at this similar question: http://stackoverflow.com/questions/3452423/possible-a-div-overlay-which-is-completely-ignored-by-mouse-events-so-that-mo –  Aug 16 '11 at 05:27
  • A sample code would be much better help, so that we understand what you are trying to convey – sasidhar Aug 16 '11 at 05:34
  • See: http://stackoverflow.com/questions/6740242/click-link-below-a-higher-z-index-div/6740272#6740272 – thirtydot Aug 17 '11 at 09:01

1 Answers1

7

Absolutely positioned elements use the z-index for stacking - which explains why content below is inaccessible. It is, unfortunately, not a case of interactive states, but simply of obstruction.

Any absolutely positioned block elements will obscure elements set below them as far as the dimensions of the uppermost element stretch (set a border on the div to see exactly how far the obstruction is occurring).

Your best bet (within the bounds of css) is to either position the obscuring div below where you need interactivity, or to add the properties of the obscuring div directly to the div being obscured.

EDIT: i.e. there is no property in CSS to turn an interactive state on or off.

UPDATE 2011/11/11: see https://developer.mozilla.org/en/CSS/pointer-events for a solution to the question. pointer-events: none; is a valid solution to the question.

Larry
  • 1,238
  • 2
  • 20
  • 25
  • 1
    An SVG property has been added to the CSS3 spec allowing users to select elements 'through' elements: [https://developer.mozilla.org/en/CSS/pointer-events](https://developer.mozilla.org/en/CSS/pointer-events). FF and Webkit support this property; not entirely sure about other support. The new property is great for disabling interaction with links for 'current' pages. – Larry Nov 11 '11 at 12:13
  • 1
    Good find on 'pointer-events: none;' That wasn't on my radar. – Robert Brisita Mar 16 '15 at 22:06