0

Say I have divs B-Z all over my webpage. I have div A, which is inserted at the very beginning with 

  position: absolute !important;
  height: 100% !important;
  width: 100% !important;

which basically spans the entire browser page. However, div A is hidden.

Now, I am trying to implement a file upload drag-n-drop feature. The idea is this: div A is hidden as soon as the page loads, and remains hidden until the user drags a file onto the browser. At this point, div A shows itself, covering all other elements, then after the drop, it hides itself again.

After realising that the jquery/ember dragLeave event fires upon entering or leaving any child element, I am now looking for a way to have a div blanket all other elements so that any and all mouse events that occur on div A are not even registered for the elements underneath it. In fact, the other elements shouldn't even be seen when this div shows. Kind of like a photoshop layer.

I've tried Z-index to no avail.

Just to be clear, divs B-Z are not child elements of div A; div A is simple inserted before all other divs.

Ian Griffiths
  • 14,302
  • 2
  • 64
  • 88
Darshan
  • 937
  • 3
  • 15
  • 27

1 Answers1

2

div A should be AFTER all the other divs if you want it to be on top of them (this will work without a z-index). a positive z-index should work as long as the other elements do not have a z-index as well.

Dusty
  • 623
  • 5
  • 11
  • well, that was easy. Thank you very much. Just to clarify, is it that every div placed after A will be placed over A because A's position is absolute? – Darshan Aug 08 '14 at 11:51
  • Since A is absolute, it is taken out of the flow of the page. This means the other divs are placed as if A does not exist. Since the order of the elements determines which is in front, everything after A will be placed on top of it. – Dusty Aug 09 '14 at 13:26