I know that the 4 windows on this page are on top of the text. However, this is not a problem since they can all be moved - just drag the dark blue bar with the mouse. In a finished product, they will be a part of dialogboxes that appear and disappear depending on user input.
The windows on this page just use standard mouse events. On another page, I tried to use the HTML drag method, but that failed with Firefox and produced unacceptable results with Chrome in Windows 10.
Using only mouse events, the motion was ok (though a bit jerky with Firefox on Windows XP) but sometimes the mouse would slip out of the div and begin highlighting the text on the page. This is particularly bad using Firefox on Windows XP. I was able to fix most of the problems by placing a temporary div on top of everything, allowing it to process the mouse move events, and moving the window under it (see Div inside div 2). This is pretty smooth in all 4 Windows 10 browsers I tested, and with Chrome on Windows XP, but still real choppy with Firefox on XP.
When you look at the source, each section below has the style and code needed for that example.
|Note:||When setting breakpoints in Firefox, the mouse gets into a state where you can no longer click on anything. In windows XP, the solution is to right click on one of the icons at the bottom of the screen - that resets the cursor so that the mouse is usable. Simply changing the top window (application) via Alt-Tab does not work because the old mouse cursor is simply cached and restored. Clicking on the icons keeps the "mouse is not available" icon from being restored. Unfortunately, in Windows 10 - you're screwed. I was not able to find a way to recover the mouse. (Sometimes, F5 appears to work.)|
Simple div with background
Initially, the background div has a blue color and a z-index of -1, so that it is below everything. When the Simple div with background window is clicked (when the mouse button is released), the color is removed. This implementation is just to help with testing the various implementations and is not how I use the code in actual components.
Div inside div
Div inside div 2
Also, because several designs are on this page, all the style definitions are tied to individual id's. In a generic library, they will be tied to classes.
In addition, the background/foreground div has a color and opacity just for test. Those may also be removed in a final library. (The color goes away when the Simple div with background window is clicked.)